@umituz/react-native-photo-editor 2.0.21 → 2.0.23

package/src/presentation/components/sheets/TextEditorSheet.tsx

@@ -0,0 +1,159 @@
+/**
+ * Text Editor Sheet Component
+ * Bottom sheet for editing text layers
+ */
+
+import React, { memo } 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 "../ui/ColorPicker";
+import type { TextAlign } from "../../../domain/entities/Layer";
+
+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: "»" },
+];
+
+const StyleButton = memo<{ label: string; isActive: boolean; onPress: () => void; children: React.ReactNode }>(
+  ({ label, isActive, onPress, children }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <TouchableOpacity
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: tokens.borders.radius.sm,
+          borderWidth: 1.5,
+          borderColor: isActive ? tokens.colors.primary : tokens.colors.border,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isActive ? tokens.colors.primary + "20" : tokens.colors.surfaceVariant,
+        }}
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isActive }}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+);
+
+StyleButton.displayName = "StyleButton";
+
+export const TextEditorSheet = memo<TextEditorSheetProps>(({
+  value,
+  onChange,
+  onSave,
+  t,
+  color = "#FFFFFF",
+  onColorChange,
+  textAlign = "center",
+  onTextAlignChange,
+  isBold = false,
+  onBoldChange,
+  isItalic = false,
+  onItalicChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  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
+      />
+
+      <View style={styles.row}>
+        {onBoldChange && (
+          <StyleButton label="Bold" isActive={isBold} onPress={() => onBoldChange(!isBold)}>
+            <AtomicText fontWeight="bold" color={isBold ? "primary" : "textSecondary"}>
+              B
+            </AtomicText>
+          </StyleButton>
+        )}
+
+        {onItalicChange && (
+          <StyleButton label="Italic" isActive={isItalic} onPress={() => onItalicChange(!isItalic)}>
+            <AtomicText color={isItalic ? "primary" : "textSecondary"} style={{ fontStyle: "italic" }}>
+              I
+            </AtomicText>
+          </StyleButton>
+        )}
+
+        {onTextAlignChange && (
+          <View style={[styles.row, { marginLeft: tokens.spacing.sm }]}>
+            {ALIGN_OPTIONS.map(({ value: align, icon }) => (
+              <StyleButton
+                key={align}
+                label={`Align ${align}`}
+                isActive={textAlign === align}
+                onPress={() => onTextAlignChange(align)}
+              >
+                <AtomicText color={textAlign === align ? "primary" : "textSecondary"}>{icon}</AtomicText>
+              </StyleButton>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {onColorChange && (
+        <ColorPicker
+          label="Text Color"
+          selectedColor={color}
+          onSelectColor={onColorChange}
+        />
+      )}
+
+      <AtomicButton variant="primary" onPress={onSave}>
+        {t("common.save") || "Save"}
+      </AtomicButton>
+    </View>
+  );
+});
+
+TextEditorSheet.displayName = "TextEditorSheet";
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 16 },
+  input: {
+    backgroundColor: "#F5F5F5",
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 18,
+    color: "#000",
+    textAlign: "center",
+    minHeight: 90,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

package/src/presentation/components/ui/ColorPicker.tsx

@@ -0,0 +1,78 @@
+/**
+ * Color Picker Component
+ * Grid of color options
+ */
+
+import React, { memo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+const DEFAULT_COLORS = [
+  "#FFFFFF", "#000000", "#888888", "#CCCCCC",
+  "#FF3B30", "#FF9500", "#FFCC00", "#FF2D55",
+  "#34C759", "#30B0C7", "#007AFF", "#5AC8FA",
+  "#5856D6", "#AF52DE", "#FF6B6B", "#FFD93D",
+  "#6BCB77", "#4D96FF", "#C77DFF", "#F72585",
+];
+
+interface ColorPickerProps {
+  label?: string;
+  selectedColor: string;
+  onSelectColor: (color: string) => void;
+  colors?: readonly string[];
+}
+
+export const ColorPicker = memo<ColorPickerProps>(({
+  label,
+  selectedColor,
+  onSelectColor,
+  colors = DEFAULT_COLORS,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <AtomicText type="labelMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>
+          {label}
+        </AtomicText>
+      )}
+      <View style={styles.grid}>
+        {colors.map((color) => (
+          <TouchableOpacity
+            key={color}
+            style={[
+              styles.color,
+              {
+                backgroundColor: color,
+                borderWidth: selectedColor === color ? 3 : 1,
+                borderColor: selectedColor === color ? tokens.colors.primary : "#E0E0E0",
+              },
+            ]}
+            onPress={() => onSelectColor(color)}
+            accessibilityLabel={`Color ${color}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selectedColor === color }}
+          />
+        ))}
+      </View>
+    </View>
+  );
+});
+
+ColorPicker.displayName = "ColorPicker";
+
+const styles = StyleSheet.create({
+  container: { gap: 8 },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  color: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+});

package/src/presentation/components/ui/Slider.tsx

@@ -0,0 +1,116 @@
+/**
+ * Slider Component
+ * Custom slider for numeric values
+ */
+
+import React, { memo, 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 = memo<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;
+          }}
+        >
+          <View
+            style={{
+              height: 4,
+              backgroundColor: tokens.colors.surfaceVariant,
+              borderRadius: 2,
+            }}
+          >
+            <View
+              style={{
+                width: `${percent * 100}%`,
+                height: "100%",
+                backgroundColor: tokens.colors.primary,
+                borderRadius: 2,
+              }}
+            />
+          </View>
+          <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>
+  );
+});
+
+Slider.displayName = "Slider";

package/src/types.ts

@@ -1,70 +1,25 @@
 /**
- * Editor Domain Types
+ * Legacy Types (for backward compatibility)
+ *
+ * @deprecated Use types from src/domain/entities/ instead
  */
 
-export type TextAlign = "left" | "center" | "right";
+export type { TextAlign } from "./domain/entities/Layer";
+export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer";
+export type { Transform } from "./domain/entities/Transform";
+export type { FilterValues as ImageFilters, DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";
 
-export interface ImageFilters {
-  brightness: number;
-  contrast: number;
-  saturation: number;
-  sepia: number;
-  grayscale: number;
-  hueRotate?: number; // 0-360 degrees
-}
-
-export const DEFAULT_IMAGE_FILTERS: ImageFilters = {
-  brightness: 1,
-  contrast: 1,
-  saturation: 1,
-  sepia: 0,
-  grayscale: 0,
-};
-
-export interface BaseLayer {
-  id: string;
-  x: number;
-  y: number;
-  rotation: number;
-  scale: number;
-  opacity: number;
-  zIndex: number;
-  type: "text" | "sticker";
-}
-
-export interface TextLayer extends BaseLayer {
-  type: "text";
-  text: string;
-  fontSize: number;
-  fontFamily: string;
-  color: string;
-  backgroundColor: string;
-  textAlign: TextAlign;
-  isBold?: boolean;
-  isItalic?: boolean;
-  strokeColor?: string;
-  strokeWidth?: number;
-}
+// Re-export type guards
+export { isTextLayer, isStickerLayer } from "./domain/entities/Layer";
 
-export interface StickerLayer extends BaseLayer {
-  type: "sticker";
-  uri: string;
-}
-
-export type Layer = TextLayer | StickerLayer;
+// Legacy type alias
+export interface TextLayerData extends TextLayer {}
+export interface StickerLayerData extends StickerLayer {}
 
+// Legacy EditorState (kept for compatibility)
 export interface EditorState {
   layers: Layer[];
   activeLayerId: string | null;
   canvasSize: { width: number; height: number };
   filters: ImageFilters;
 }
-
-// Type guards for discriminating union types
-export function isTextLayer(layer: Layer): layer is TextLayer {
-  return layer.type === "text";
-}
-
-export function isStickerLayer(layer: Layer): layer is StickerLayer {
-  return layer.type === "sticker";
-}