Impleneted simple react photo editor according to spec

.gitignore

@@ -2,4 +2,3 @@
 *.iml
 dist/
 node_modules
-.parcel-cache

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint && yarn test

app/config.ts

@@ -0,0 +1,16 @@
+export const appConfig = {
+  /**
+   * Specifies the number of pixels per inch used for rendering and measurements.
+   * */
+  PIXELS_PER_INCH: 40,
+
+  /**
+   * Specifies the width of the canvas in inches
+   * */
+  CANVAS_WIDTH_INCHES: 15,
+
+  /**
+   * Specifies the height of the canvas in inches
+   * */
+  CANVAS_HEIGHT_INCHES: 10,
+};

app/features/photo-editor/components/photo-editor/index.spec.tsx

@@ -0,0 +1,84 @@
+import { act, render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { PhotoEditor } from "@/features/photo-editor/components/photo-editor/index";
+
+describe("PhotoEditor", () => {
+  beforeEach(() => {
+    render(<PhotoEditor />);
+  });
+
+  it("renders PhotoEditor and doesnt crash", () => {
+    expect(screen.getByTestId("photo-editor")).toBeDefined();
+  });
+
+  it("renders PhotoEditor file input", () => {
+    expect(screen.getByTestId("photo-editor-file-input")).toBeDefined();
+  });
+
+  it("renders PhotoEditor canvas", () => {
+    expect(screen.getByTestId("photo-editor-canvas")).toBeDefined();
+  });
+
+  it("can insert a base64 image file", async () => {
+    const user = userEvent.setup();
+
+    // Base64 image data
+    const base64Image =
+      "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC";
+
+    // Convert base64 to Blob
+    const blob = await fetch(`data:image/png;base64,${base64Image}`).then(
+      (res) => res.blob(),
+    );
+
+    // Create File from Blob
+    const file = new File([blob], "image.png", { type: "image/png" });
+
+    const fileInput = screen.getByTestId("photo-editor-file-input");
+
+    await act(async () => {
+      await user.upload(fileInput, file);
+
+      const fileReader = new FileReader();
+
+      fileReader.onload = () => {
+        expect(fileReader.result as string).toBe(
+          `data:image/png;base64,${base64Image}`,
+        );
+      };
+
+      expect(fileInput.files[0]).toBe(file);
+      expect(fileInput.files[0].type).toBe("image/png");
+      expect(fileInput.files.length).toBe(1);
+    });
+  });
+
+  it("can insert JSON file", async () => {
+    const jsonInput = screen.getByTestId("photo-editor-json-input");
+
+    const user = userEvent.setup();
+
+    const file = new File(
+      [
+        JSON.stringify({
+          id: "12345",
+          src: "https://example.com/image.png",
+          width: 100,
+          height: 100,
+          x: 0,
+          y: 0,
+        }),
+      ],
+      "example.json",
+      { type: "application/json" },
+    );
+
+    await act(async () => {
+      await user.upload(jsonInput, file);
+
+      expect(jsonInput.files[0]).toBe(file);
+      expect(jsonInput.files[0].type).toBe("application/json");
+      expect(jsonInput.files.length).toBe(1);
+    });
+  });
+});