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

package/src/components/EditorCanvas.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { Image } from "expo-image";
-import { DraggableText, LayerTransform } from "./DraggableText";
-import { DraggableSticker } from "./DraggableSticker";
-import { Layer, ImageFilters } from "../types";
-
-interface EditorCanvasProps {
-  imageUrl: string;
-  layers: Layer[];
-  activeLayerId: string | null;
-  filters: ImageFilters;
-  onLayerTap: (layerId: string) => void;
-  onLayerTransform: (layerId: string, transform: LayerTransform) => void;
-  styles: {
-    canvas: object;
-    canvasImage: object;
-  };
-}
-
-export const EditorCanvas: React.FC<EditorCanvasProps> = ({
-  imageUrl,
-  layers,
-  activeLayerId,
-  filters,
-  onLayerTap,
-  onLayerTransform,
-  styles: externalStyles,
-}) => {
-  // Basic brightness preview: dark overlay for < 1, light for > 1
-  const brightness = filters.brightness ?? 1;
-  const brightnessOverlay =
-    brightness < 1
-      ? { color: "black", opacity: Math.min(0.6, 1 - brightness) }
-      : brightness > 1
-        ? { color: "white", opacity: Math.min(0.4, brightness - 1) }
-        : null;
-
-  return (
-    <View style={externalStyles.canvas}>
-      <Image
-        source={{ uri: imageUrl }}
-        style={externalStyles.canvasImage}
-        contentFit="cover"
-      />
-
-      {/* Brightness visual overlay */}
-      {brightnessOverlay && (
-        <View
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              backgroundColor: brightnessOverlay.color,
-              opacity: brightnessOverlay.opacity,
-            },
-          ]}
-          pointerEvents="none"
-        />
-      )}
-
-      {layers.map((layer) => {
-        if (layer.type === "text") {
-          return (
-            <DraggableText
-              key={layer.id}
-              text={layer.text || "Tap to edit"}
-              color={layer.color}
-              fontSize={layer.fontSize}
-              fontFamily={layer.fontFamily}
-              textAlign={layer.textAlign}
-              rotation={layer.rotation}
-              scale={layer.scale}
-              opacity={layer.opacity}
-              backgroundColor={layer.backgroundColor}
-              isBold={layer.isBold}
-              isItalic={layer.isItalic}
-              initialX={layer.x}
-              initialY={layer.y}
-              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
-              onPress={() => onLayerTap(layer.id)}
-              isSelected={activeLayerId === layer.id}
-            />
-          );
-        } else if (layer.type === "sticker") {
-          return (
-            <DraggableSticker
-              key={layer.id}
-              uri={layer.uri}
-              initialX={layer.x}
-              initialY={layer.y}
-              rotation={layer.rotation}
-              scale={layer.scale}
-              opacity={layer.opacity}
-              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
-              onPress={() => onLayerTap(layer.id)}
-              isSelected={activeLayerId === layer.id}
-            />
-          );
-        }
-        return null;
-      })}
-    </View>
-  );
-};
-
-export default React.memo(EditorCanvas);

package/src/components/EditorToolbar.tsx

@@ -1,155 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-
-interface EditorToolbarProps {
-  onAddText: () => void;
-  onAddSticker?: () => void;
-  onOpenFilters?: () => void;
-  onOpenAdjustments?: () => void;
-  onOpenLayers: () => void;
-  onAIMagic?: () => void;
-  onUndo?: () => void;
-  onRedo?: () => void;
-  canUndo?: boolean;
-  canRedo?: boolean;
-  t: (key: string) => string;
-  styles: {
-    bottomToolbar: object;
-    toolButton: object;
-    toolButtonActive: object;
-    aiMagicButton: object;
-    [key: string]: object;
-  };
-}
-
-const ToolButton = ({
-  icon,
-  label,
-  onPress,
-  isActive,
-  disabled,
-  parentStyles,
-}: {
-  icon: string;
-  label: string;
-  onPress: () => void;
-  isActive?: boolean;
-  disabled?: boolean;
-  parentStyles: EditorToolbarProps["styles"];
-}) => (
-  <TouchableOpacity
-    style={[parentStyles.toolButton, isActive && parentStyles.toolButtonActive]}
-    onPress={onPress}
-    disabled={disabled}
-    accessibilityLabel={label}
-    accessibilityRole="button"
-    accessibilityState={{ selected: isActive, disabled }}
-  >
-    <AtomicIcon
-      name={icon as "edit"}
-      size="md"
-      color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
-    />
-    <AtomicText
-      type="labelSmall"
-      color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
-    >
-      {label}
-    </AtomicText>
-  </TouchableOpacity>
-);
-
-export const EditorToolbar: React.FC<EditorToolbarProps> = ({
-  onAddText,
-  onAddSticker,
-  onOpenFilters,
-  onOpenAdjustments,
-  onOpenLayers,
-  onAIMagic,
-  onUndo,
-  onRedo,
-  canUndo = false,
-  canRedo = false,
-  styles: parentStyles,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={parentStyles.bottomToolbar}>
-      {onUndo && (
-        <ToolButton
-          icon="arrow-back"
-          label={t("photo_editor.undo") || "Undo"}
-          onPress={onUndo}
-          disabled={!canUndo}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      <ToolButton
-        icon="edit"
-        label={t("photo_editor.text") || "Text"}
-        onPress={onAddText}
-        parentStyles={parentStyles}
-      />
-
-      {onAddSticker && (
-        <ToolButton
-          icon="sparkles"
-          label={t("photo_editor.sticker") || "Sticker"}
-          onPress={onAddSticker}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      {onAIMagic && (
-        <TouchableOpacity
-          style={parentStyles.aiMagicButton}
-          onPress={onAIMagic}
-          accessibilityLabel="AI Magic"
-          accessibilityRole="button"
-        >
-          <AtomicIcon name="sparkles" size="lg" customColor={tokens.colors.onPrimary} />
-        </TouchableOpacity>
-      )}
-
-      {onOpenAdjustments && (
-        <ToolButton
-          icon="flash"
-          label={t("photo_editor.adjust") || "Adjust"}
-          onPress={onOpenAdjustments}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      {onOpenFilters && (
-        <ToolButton
-          icon="brush"
-          label={t("photo_editor.filters") || "Filters"}
-          onPress={onOpenFilters}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      <ToolButton
-        icon="copy"
-        label={t("photo_editor.layers") || "Layers"}
-        onPress={onOpenLayers}
-        parentStyles={parentStyles}
-      />
-
-      {onRedo && (
-        <ToolButton
-          icon="chevron-forward"
-          label={t("photo_editor.redo") || "Redo"}
-          onPress={onRedo}
-          disabled={!canRedo}
-          parentStyles={parentStyles}
-        />
-      )}
-    </View>
-  );
-};

package/src/components/FilterPicker.tsx

@@ -1,73 +0,0 @@
-import React, { useMemo } 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";
-import { DEFAULT_FILTERS, type FilterOption } from "../constants";
-
-interface FilterPickerProps {
-  selectedFilter: string;
-  onSelectFilter: (option: FilterOption) => void;
-  filters?: FilterOption[];
-}
-
-export const FilterPicker: React.FC<FilterPickerProps> = ({
-  selectedFilter,
-  onSelectFilter,
-  filters = DEFAULT_FILTERS,
-}) => {
-  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 },
-    filter: {
-      width: 75,
-      height: 75,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.surfaceVariant,
-      alignItems: "center",
-      justifyContent: "center",
-      borderWidth: 2,
-      borderColor: "transparent",
-    },
-    active: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "10",
-    },
-  }), [tokens]);
-
-  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, isActive && styles.active]}
-              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>
-  );
-};
-
-export default React.memo(FilterPicker);

package/src/components/FontControls.tsx

@@ -1,132 +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";
-
-interface FontControlsProps {
-  fontSize: number;
-  selectedFont: string;
-  fonts: readonly string[];
-  onFontSizeChange: (size: number) => void;
-  onFontSelect: (font: string) => void;
-  styles: {
-    controlsPanel: object;
-    fontRow: object;
-    fontChip: object;
-    fontChipActive: object;
-    [key: string]: object;
-  };
-}
-
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 128;
-const FONT_SIZE_STEP = 4;
-
-export const FontControls: React.FC<FontControlsProps> = ({
-  fontSize,
-  selectedFont,
-  fonts,
-  onFontSizeChange,
-  onFontSelect,
-  styles: externalStyles,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    stepRow: {
-      flexDirection: "row",
-      gap: tokens.spacing.sm,
-      marginBottom: tokens.spacing.md,
-    },
-    stepBtn: {
-      padding: tokens.spacing.sm,
-      backgroundColor: tokens.colors.surface,
-      borderRadius: tokens.borders.radius.sm,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-      minWidth: 44,
-      alignItems: "center",
-    },
-    sizeRow: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: tokens.spacing.sm,
-    },
-    sizeLabel: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.xs,
-    },
-  }), [tokens]);
-
-  return (
-    <View style={externalStyles.controlsPanel}>
-      <View style={styles.sizeRow}>
-        <View style={styles.sizeLabel}>
-          <AtomicIcon name="edit" size="sm" color="textSecondary" />
-          <AtomicText type="labelMedium" color="textSecondary">
-            Text Size
-          </AtomicText>
-        </View>
-        <AtomicText fontWeight="bold" color="primary">
-          {fontSize}px
-        </AtomicText>
-      </View>
-
-      <View style={styles.stepRow}>
-        <TouchableOpacity
-          style={styles.stepBtn}
-          onPress={() => onFontSizeChange(Math.max(MIN_FONT_SIZE, fontSize - FONT_SIZE_STEP))}
-          accessibilityLabel="Decrease font size"
-          accessibilityRole="button"
-        >
-          <AtomicText fontWeight="bold">−</AtomicText>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.stepBtn}
-          onPress={() => onFontSizeChange(Math.min(MAX_FONT_SIZE, fontSize + FONT_SIZE_STEP))}
-          accessibilityLabel="Increase font size"
-          accessibilityRole="button"
-        >
-          <AtomicText fontWeight="bold">+</AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <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)}
-              accessibilityLabel={`Font: ${font}`}
-              accessibilityRole="button"
-              accessibilityState={{ selected: selectedFont === font }}
-            >
-              <AtomicText
-                fontWeight="bold"
-                color={selectedFont === font ? "onPrimary" : "textSecondary"}
-                style={{ fontFamily: font === "System" ? undefined : font }}
-              >
-                {font}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default React.memo(FontControls);

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