@umituz/react-native-photo-editor 1.0.3 → 1.0.5

package/eslint.config.js

@@ -0,0 +1,31 @@
+const js = require("@eslint/js");
+const tseslint = require("@typescript-eslint/eslint-plugin");
+const tsParser = require("@typescript-eslint/parser");
+
+module.exports = [
+  js.configs.recommended,
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        project: "./tsconfig.json",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "no-console": "off",
+    },
+  },
+  {
+    ignores: ["node_modules/", "*.js"],
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -21,12 +21,27 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "@umituz/react-native-design-system": "*"
+    "@umituz/react-native-design-system": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*"
   },
   "dependencies": {
     "expo-image-picker": "*",
     "expo-media-library": "*",
     "expo-file-system": "*",
     "expo-image": "*"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "@typescript-eslint/parser": "*",
+    "@typescript-eslint/eslint-plugin": "*",
+    "eslint": "*",
+    "typescript": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*",
+    "expo-application": "*",
+    "expo-device": "*",
+    "expo-linear-gradient": "*"
   }
 }

package/src/PhotoEditor.tsx

@@ -7,6 +7,7 @@ import {
   BottomSheetModal,
   SafeBottomSheetModalProvider,
   useSafeAreaInsets,
+  DesignTokens,
 } from "@umituz/react-native-design-system";
 
 import { EditorCanvas } from "./components/EditorCanvas";
@@ -18,11 +19,12 @@ import { LayerManager } from "./components/LayerManager";
 import { TextEditorSheet } from "./components/TextEditorSheet";
 import { createEditorStyles } from "./styles";
 import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
+import { Layer } from "./types";
 
 export interface EditorActions {
-  addTextLayer: (tokens: any) => string;
-  updateLayer: (id: string, updates: any) => void;
-  getLayers: () => any[];
+  addTextLayer: (tokens: DesignTokens) => string;
+  updateLayer: (id: string, updates: Partial<Layer>) => void;
+  getLayers: () => Layer[];
   getActiveLayerId: () => string | null;
 }
 
@@ -72,6 +74,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
     updateLayer,
     deleteLayer,
     selectLayer,
+    addTextLayer,
     handleAddText,
     handleTextLayerTap,
     handleSaveText,

package/src/components/AIMagicSheet.tsx

@@ -15,7 +15,7 @@ import {
 interface AIMagicSheetProps {
   onGenerateCaption: (style: string) => void;
   isLoading?: boolean;
-  t: (key: string) => string;
+  _t: (key: string) => string;
 }
 
 const AI_STYLES = [
@@ -30,7 +30,7 @@ const AI_STYLES = [
 export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
   onGenerateCaption,
   isLoading = false,
-  t,
+  _t,
 }) => {
   const tokens = useAppDesignTokens();
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);

package/src/components/DraggableText.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
@@ -10,7 +10,7 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { TextAlign } from "../../domain/Editor.types";
+import { TextAlign } from "../types";
 
 interface DraggableTextProps {
   text: string;
@@ -22,8 +22,8 @@ interface DraggableTextProps {
   scale?: number;
   opacity?: number;
   backgroundColor?: string;
-  strokeColor?: string;
-  strokeWidth?: number;
+  _strokeColor?: string;
+  _strokeWidth?: number;
   initialX: number;
   initialY: number;
   onDragEnd: (x: number, y: number) => void;
@@ -41,8 +41,8 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
   scale = 1,
   opacity = 1,
   backgroundColor = "transparent",
-  strokeColor,
-  strokeWidth = 2,
+  _strokeColor,
+  _strokeWidth = 2,
   initialX,
   initialY,
   onDragEnd,

package/src/components/EditorCanvas.tsx

@@ -47,8 +47,8 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
               scale={textLayer.scale}
               opacity={textLayer.opacity}
               backgroundColor={textLayer.backgroundColor}
-              strokeColor={textLayer.strokeColor}
-              strokeWidth={textLayer.strokeWidth}
+              _strokeColor={textLayer.strokeColor}
+              _strokeWidth={textLayer.strokeWidth}
               initialX={textLayer.x}
               initialY={textLayer.y}
               onDragEnd={(x, y) => onLayerMove(layer.id, x, y)}

package/src/components/FilterPicker.tsx

@@ -6,21 +6,14 @@ import {
   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 },
-];
+const FILTERS = [
+  { id: "none", name: "None", icon: "close-circle" as const, value: 0 },
+  { id: "sepia", name: "Sepia", icon: "color-palette" as const, value: 0.5 },
+  { id: "grayscale", name: "B&W", icon: "contrast" as const, value: 1 },
+  { id: "vintage", name: "Vintage", icon: "time" as const, value: 0.7 },
+  { id: "warm", name: "Warm", icon: "sunny" as const, value: 0.3 },
+  { id: "cool", name: "Cool", icon: "snow" as const, value: 0.3 },
+] as const;
 
 interface FilterPickerProps {
   selectedFilter: string;
@@ -82,7 +75,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
             onPress={() => onSelectFilter(filter.id, filter.value)}
           >
             <AtomicIcon
-              name={filter.icon as any}
+              name={filter.icon}
               size="lg"
               color={selectedFilter === filter.id ? "primary" : "textSecondary"}
             />

package/src/hooks/usePhotoEditorUI.ts

@@ -1,6 +1,7 @@
 import { useRef, useState, useCallback, useEffect } from "react";
 import { BottomSheetModalRef, DesignTokens } from "@umituz/react-native-design-system";
 import { usePhotoEditor } from "./usePhotoEditor";
+import { Layer, TextLayer } from "../types";
 
 export const usePhotoEditorUI = (
   initialCaption: string | undefined,
@@ -32,16 +33,17 @@ export const usePhotoEditorUI = (
   useEffect(() => {
     if (initialCaption) {
       const id = addTextLayer(tokens);
-      setTimeout(() => {
-        updateLayer(id, { text: initialCaption } as any, true);
-      }, 0);
+      void Promise.resolve().then(() => {
+        updateLayer(id, { text: initialCaption } as Partial<Layer>, true);
+      });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [initialCaption, addTextLayer, tokens]);
 
   const handleAddText = useCallback(() => {
     addTextLayer(tokens);
-    setTimeout(() => textEditorSheetRef.current?.present(), 100);
+    void Promise.resolve().then(() => {
+      textEditorSheetRef.current?.present();
+    });
   }, [addTextLayer, tokens]);
 
   const handleTextLayerTap = useCallback(
@@ -49,8 +51,9 @@ export const usePhotoEditorUI = (
       selectLayer(layerId);
       const layer = layers.find((l) => l.id === layerId);
       if (layer?.type === "text") {
-        setEditingText((layer as any).text || "");
-        setFontSize((layer as any).fontSize || 48);
+        const textLayer = layer as TextLayer;
+        setEditingText(textLayer.text || "");
+        setFontSize(textLayer.fontSize || 48);
         textEditorSheetRef.current?.present();
       }
     },
@@ -63,10 +66,10 @@ export const usePhotoEditorUI = (
         text: editingText,
         fontSize,
         fontFamily: selectedFont,
-      } as any);
+      } as Partial<Layer>);
     }
     textEditorSheetRef.current?.dismiss();
-  }, [activeLayerId, editingText, fontSize, selectedFont, updateLayer]);
+  }, [activeLayerId, editingText, fontSize, selectedFont, updateLayer, textEditorSheetRef]);
 
   const handleSelectFilter = useCallback(
     (filterId: string, value: number) => {
@@ -116,6 +119,7 @@ export const usePhotoEditorUI = (
     updateLayer,
     deleteLayer,
     selectLayer,
+    addTextLayer,
     // UI Actions
     handleAddText,
     handleTextLayerTap,

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-native",
+    "declaration": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "."
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}