pixedi 1.0.0

package/src/shared/components/ImageEditor/provider/ImageEditorProvider.test.tsx

@@ -0,0 +1,126 @@
+import { act, renderHook } from "@testing-library/react";
+import type { PropsWithChildren } from "react";
+import { describe, expect, it } from "vitest";
+import { ImageEditorProvider } from "./ImageEditorProvider";
+import { useImageEditorContext } from "./useImageEditorContext";
+
+const initialItem = {
+  name: "Initial",
+  base64: "data:image/png;base64,initial",
+  width: 800,
+  height: 600,
+};
+
+const editedItem = {
+  name: "Resize",
+  base64: "data:image/png;base64,edited",
+  width: 400,
+  height: 300,
+};
+
+const secondEditedItem = {
+  name: "Crop",
+  base64: "data:image/png;base64,cropped",
+  width: 200,
+  height: 200,
+};
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <ImageEditorProvider
+    base64={initialItem.base64}
+    width={initialItem.width}
+    height={initialItem.height}
+    ext="png"
+  >
+    {children}
+  </ImageEditorProvider>
+);
+
+describe("ImageEditorProvider", () => {
+  it("initializes the image history and editor state", () => {
+    const { result } = renderHook(() => useImageEditorContext(), { wrapper });
+
+    expect(result.current.history).toEqual({ items: [initialItem], pointer: 0 });
+    expect(result.current.extension).toBe("png");
+    expect(result.current.currentAction).toBeNull();
+    expect(result.current.getSidebar()).toBe(false);
+    expect(result.current.getLastHistoryItem()).toEqual(initialItem);
+  });
+
+  it("updates the selected action and sidebar visibility", () => {
+    const { result } = renderHook(() => useImageEditorContext(), { wrapper });
+    const action = {
+      name: "resize" as const,
+      args: { width: 400, height: 300 },
+    };
+
+    act(() => {
+      result.current.setCurrentAction(action);
+      result.current.setSidebar(true);
+    });
+
+    expect(result.current.getCurrentAction()).toEqual(action);
+    expect(result.current.getSidebar()).toBe(true);
+  });
+
+  it("adds edits, clears the action, and discards redo history", () => {
+    const { result } = renderHook(() => useImageEditorContext(), { wrapper });
+
+    act(() => {
+      result.current.setCurrentAction({
+        name: "resize",
+        args: { width: 400, height: 300 },
+      });
+      result.current.addToHistory(editedItem);
+      result.current.addToHistory(secondEditedItem);
+      result.current.undo();
+      result.current.addToHistory({ ...editedItem, name: "Replacement" });
+    });
+
+    expect(result.current.currentAction).toBeNull();
+    expect(result.current.history.pointer).toBe(2);
+    expect(result.current.history.items).toEqual([
+      initialItem,
+      editedItem,
+      { ...editedItem, name: "Replacement" },
+    ]);
+  });
+
+  it("moves through history without exceeding its boundaries", () => {
+    const { result } = renderHook(() => useImageEditorContext(), { wrapper });
+
+    act(() => {
+      result.current.undo();
+    });
+    expect(result.current.history.pointer).toBe(0);
+
+    act(() => {
+      result.current.addToHistory(editedItem);
+      result.current.undo();
+    });
+    expect(result.current.history.pointer).toBe(0);
+    expect(result.current.getLastHistoryItem()).toEqual(initialItem);
+
+    act(() => {
+      result.current.redo();
+      result.current.redo();
+    });
+    expect(result.current.history.pointer).toBe(1);
+    expect(result.current.getLastHistoryItem()).toEqual(editedItem);
+  });
+
+  it("resets to the source image and resets history after saving", () => {
+    const { result } = renderHook(() => useImageEditorContext(), { wrapper });
+
+    act(() => {
+      result.current.addToHistory(editedItem);
+      result.current.resetHistoryAfterSave();
+    });
+    expect(result.current.history).toEqual({ items: [editedItem], pointer: 0 });
+
+    act(() => {
+      result.current.resetHistory();
+    });
+    expect(result.current.history).toEqual({ items: [initialItem], pointer: 0 });
+  });
+});

package/src/shared/components/ImageEditor/provider/ImageEditorProvider.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { getInitialState } from "./initialState";
+import { StoreContext } from "./StoreContext";
+import type { ImageEditorContextType } from "./initialState";
+import type { Action, HistoryItem } from "../types";
+
+type ImageEditorProviderProps = {
+  children: React.ReactNode;
+  base64: string;
+  width: number;
+  height: number;
+  ext: string;
+};
+
+export const ImageEditorProvider = ({
+  children,
+  base64,
+  width,
+  height,
+  ext,
+}: ImageEditorProviderProps) => {
+  const [state, setState] = useState<ImageEditorContextType>(
+    getInitialState(ext, width, height, base64),
+  );
+
+  const getCurrentAction = () => state.currentAction;
+
+  const setCurrentAction = (payload: Action | null) =>
+    setState((store) => ({ ...store, currentAction: payload }));
+
+  const addToHistory = (payload: HistoryItem) =>
+    setState((store) => {
+      const incrementedPointer = store.history.pointer + 1;
+      const updatedItems = [
+        ...store.history.items.slice(0, incrementedPointer),
+        payload,
+      ];
+      return {
+        ...store,
+        currentAction: null,
+        history: {
+          items: updatedItems,
+          pointer: incrementedPointer,
+        },
+      };
+    });
+
+  const getLastHistoryItem = () =>
+    state.history.items.at(state.history.pointer)!;
+
+  const resetHistory = () =>
+    setState((store) => ({
+      ...store,
+      history: getInitialState(ext, width, height, base64).history,
+    }));
+
+  const resetHistoryAfterSave = () =>
+    setState((store) => {
+      const savedHistoryItem = store.history.items.at(store.history.pointer)!;
+      return {
+        ...store,
+        history: {
+          items: [savedHistoryItem],
+          pointer: 0,
+        },
+      };
+    });
+
+  const undo = () =>
+    setState((store) => {
+      if (store.history.pointer <= 0) return store;
+      return {
+        ...store,
+        history: { ...store.history, pointer: store.history.pointer - 1 },
+      };
+    });
+
+  const redo = () =>
+    setState((store) => {
+      if (store.history.pointer >= store.history.items.length - 1) return store;
+      return {
+        ...store,
+        history: { ...store.history, pointer: store.history.pointer + 1 },
+      };
+    });
+
+  const getSidebar = () => state.sidebar;
+
+  const setSidebar = (payload: boolean) =>
+    setState((store) => ({ ...store, sidebar: payload }));
+
+  const value = {
+    ...state,
+    getCurrentAction,
+    setCurrentAction,
+    addToHistory,
+    resetHistory,
+    resetHistoryAfterSave,
+    undo,
+    redo,
+    getLastHistoryItem,
+    getSidebar,
+    setSidebar,
+  };
+
+  return <StoreContext value={value}>{children}</StoreContext>;
+};

package/src/shared/components/ImageEditor/provider/StoreContext.tsx

@@ -0,0 +1,20 @@
+import { createContext } from "react";
+import { type ImageEditorContextType } from "./initialState";
+import type { Action, HistoryItem } from "../types";
+
+type StoreContextType = ImageEditorContextType & {
+  getCurrentAction: () => Action | null;
+  setCurrentAction: (payload: Action | null) => void;
+  addToHistory: (payload: HistoryItem) => void;
+  getLastHistoryItem: () => HistoryItem;
+  resetHistory: () => void;
+  resetHistoryAfterSave: () => void;
+  undo: () => void;
+  redo: () => void;
+  getSidebar: () => boolean;
+  setSidebar: (payload: boolean) => void;
+};
+
+export const StoreContext = createContext<StoreContextType | undefined>(
+  undefined,
+);

package/src/shared/components/ImageEditor/provider/initialState.ts

@@ -0,0 +1,30 @@
+import type { History, Action } from "../types";
+
+export type ImageEditorContextType = {
+  history: History;
+  currentAction: Action | null;
+  extension: string | null;
+  sidebar: boolean;
+};
+
+export const getInitialState = (
+  extension: string,
+  width: number,
+  height: number,
+  base64: string,
+): ImageEditorContextType => ({
+  history: {
+    pointer: 0,
+    items: [
+      {
+        name: "Initial",
+        base64,
+        width,
+        height,
+      },
+    ],
+  },
+  currentAction: null,
+  extension,
+  sidebar: false,
+});

package/src/shared/components/ImageEditor/provider/useImageEditorContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { StoreContext } from "./StoreContext";
+
+export const useImageEditorContext = () => {
+  const context = useContext(StoreContext);
+  if (!context) {
+    throw new Error(
+      "useImageEditorContext must be used within an ImageEditorProvider"
+    );
+  }
+  return context;
+};

package/src/shared/components/ImageEditor/resize/ResizeTools.tsx

@@ -0,0 +1,183 @@
+import { useEffect, useRef, useState } from "react";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { Loader, Check, X, Lock } from "../assets/icons";
+import { useImageProcessor, useMobile } from "../hooks";
+import { Button } from "../ui";
+import { InputPixel } from "../ui";
+import "./resize.css";
+
+const minScale = 10;
+const maxScale = 200;
+
+const sizeCalculator = (scale: number, width: number, height: number) => {
+  if (scale < minScale) scale = minScale;
+  if (scale > maxScale) scale = maxScale;
+  return {
+    updatedScale: scale,
+    updatedWidth: Math.round(width * (scale / 100)),
+    updatedHeight: Math.round(height * (scale / 100)),
+  };
+};
+
+type ResizeToolsProps = {
+  onResizing: (scale: number) => void;
+};
+
+export const ResizeTools = ({ onResizing }: ResizeToolsProps) => {
+  const { getLastHistoryItem, setCurrentAction, addToHistory, setSidebar } =
+    useImageEditorContext();
+  const {
+    width: currentWidth,
+    height: currentHeight,
+    base64,
+  } = getLastHistoryItem();
+  const [loading, setLoading] = useState(false);
+  const [width, setWidth] = useState(currentWidth);
+  const [height, setHeight] = useState(currentHeight);
+  const startVerticalSlideRef = useRef<number>(0);
+  const { resize } = useImageProcessor();
+  const mobile = useMobile();
+
+  const handleChangeWidth = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { updatedScale, updatedWidth, updatedHeight } = sizeCalculator(
+      (parseInt(e.target.value) / currentWidth) * 100,
+      currentWidth,
+      currentHeight,
+    );
+    setWidth(updatedWidth);
+    setHeight(updatedHeight);
+    onResizing(updatedScale);
+  };
+
+  const handleChangeHeight = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { updatedScale, updatedWidth, updatedHeight } = sizeCalculator(
+      (parseInt(e.target.value) / currentHeight) * 100,
+      currentWidth,
+      currentHeight,
+    );
+    setHeight(updatedHeight);
+    setWidth(updatedWidth);
+    onResizing(updatedScale);
+  };
+
+  const handleClose = () => {
+    onResizing(100);
+    setCurrentAction(null);
+    setSidebar(true);
+  };
+
+  const handleSave = async () => {
+    try {
+      setLoading(true);
+      const processedBase64 = await resize(base64, width, height);
+      addToHistory({
+        name: "Resize",
+        base64: processedBase64,
+        width,
+        height,
+      });
+      onResizing(100);
+      setSidebar(true);
+    } catch (error) {
+      console.error("Failed to process image:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    let updatedScale = Math.round((width / currentWidth) * 100);
+
+    const updateScale = (scale: number) => {
+      const { updatedHeight, updatedWidth } = sizeCalculator(
+        scale,
+        currentWidth,
+        currentHeight,
+      );
+      setHeight(updatedHeight);
+      setWidth(updatedWidth);
+      onResizing(scale);
+    };
+
+    const handleWheel = (e: WheelEvent) => {
+      if (loading) return;
+      const direction = Math.sign(e.deltaY);
+      updatedScale -= direction * 2;
+      if (updatedScale <= minScale) updatedScale = minScale;
+      if (updatedScale >= maxScale) updatedScale = maxScale;
+      updateScale(updatedScale);
+    };
+
+    const handleTouchStart = (e: TouchEvent) => {
+      startVerticalSlideRef.current = e.touches[0].clientY;
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (loading) return;
+      const y = e.touches[0].clientY;
+      const deltaY = startVerticalSlideRef.current - y;
+      if (Math.abs(deltaY) < 10) return;
+      const direction = Math.sign(deltaY);
+      updatedScale += direction * 2;
+      if (updatedScale <= minScale) updatedScale = minScale;
+      if (updatedScale >= maxScale) updatedScale = maxScale;
+      updateScale(updatedScale);
+      startVerticalSlideRef.current = y;
+    };
+
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    window.addEventListener("wheel", handleWheel, { signal });
+    window.addEventListener("touchstart", handleTouchStart, { signal });
+    window.addEventListener("touchmove", handleTouchMove, { signal });
+
+    return () => controller.abort();
+  }, [currentHeight, currentWidth, loading, mobile, onResizing, width]);
+
+  return (
+    <div className="resize">
+      <div className="resize-text">
+        {mobile ? "Slide UP/Down to Resize" : "Scroll UP/Down to Resize"}
+      </div>
+      <div className="resize-border" />
+      <div className="resize-tools">
+        <InputPixel
+          value={width}
+          name="width"
+          label="Width"
+          disabled={loading}
+          style={{ width: "88px" }}
+          onChange={handleChangeWidth}
+        />
+        <Lock className="resize-tools-lock" />
+        <InputPixel
+          value={height}
+          name="height"
+          label="Height"
+          disabled={loading}
+          style={{ width: "88px" }}
+          onChange={handleChangeHeight}
+        />
+        <div className="resize-tools-buttons">
+          <Button
+            variant="outline"
+            className="resize-tools-save text-green"
+            disabled={width === currentWidth || loading}
+            onClick={() => handleSave()}
+          >
+            {loading ? <Loader /> : <Check />}
+          </Button>
+          <Button
+            variant="outline"
+            className="resize-tools-close text-red"
+            disabled={loading}
+            onClick={handleClose}
+          >
+            <X />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/resize/index.ts

@@ -0,0 +1 @@
+export { ResizeTools } from "./ResizeTools";

package/src/shared/components/ImageEditor/resize/resize.css

@@ -0,0 +1,56 @@
+.resize {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--background);
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.resize-text {
+  font-size: 14px;
+  text-align: center;
+  color: var(--muted-foreground);
+}
+
+.resize-border {
+  margin: 12px auto 4px auto;
+  display: inline-block;
+  width: 60px;
+  border-bottom: 1px solid var(--border);
+}
+
+.resize-tools {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.resize-tools-lock {
+  width: 12px;
+  height: 12px;
+  color: var(--muted-foreground);
+}
+
+.resize-tools-buttons {
+  display: flex;
+  margin-left: 4px;
+}
+
+.resize-tools-save {
+  width: 36px;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.resize-tools-close {
+  width: 36px;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  margin-left: -1px;
+}

package/src/shared/components/ImageEditor/sidebar/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { useBellow } from "../hooks";
+import { Settings, X } from "../assets/icons";
+import { Button, Separator } from "../ui";
+import { SidebarResize } from "./SidebarResize";
+import { SidebarCrop } from "./SidebarCrop";
+import { SidebarPresets } from "./SidebarPresets";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import "./sidebar.css";
+
+export const Sidebar = () => {
+  const { getSidebar, setSidebar } = useImageEditorContext();
+  const isSidebarOpen = getSidebar();
+  const isBellowMd = useBellow("md");
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="sidebar-settings"
+        onClick={() => setSidebar(true)}
+      >
+        <Settings />
+      </Button>
+      <div
+        className="sidebar"
+        style={{
+          transform:
+            isBellowMd && isSidebarOpen
+              ? "translateX(-320px)"
+              : "translateX(0%)",
+        }}
+      >
+        <div className="sidebar-container">
+          <div className="sidebar-content">
+            {isBellowMd && (
+              <Button
+                variant="ghost"
+                className="sidebar-close-btn btn-rect"
+                onClick={() => setSidebar(false)}
+              >
+                <X />
+              </Button>
+            )}
+            <SidebarResize />
+            <Separator className="sidebar-separator" />
+            <SidebarCrop />
+            <Separator className="sidebar-separator" />
+            <SidebarPresets />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/shared/components/ImageEditor/sidebar/SidebarCrop.tsx

@@ -0,0 +1,57 @@
+import { Crop, Image, Square } from "../assets/icons";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import type { ActionCrop } from "../types";
+import { ButtonCrop } from "../ui";
+
+export const SidebarCrop = () => {
+  const { currentAction, setCurrentAction, getLastHistoryItem, setSidebar } =
+    useImageEditorContext();
+  const { name, args } = currentAction || {};
+  const currentValue = name === "crop" ? (args?.id as string) : "";
+  const { width, height } = getLastHistoryItem();
+  const originRatio = width / height;
+
+  const handleClick = (value: string) => {
+    if (value === currentValue) {
+      return;
+    }
+
+    const ratio = value === "1:1" ? 1 : originRatio;
+
+    const args: ActionCrop = {
+      id: value,
+      ratio,
+      isFree: value === "freeform",
+      preset: null,
+    };
+
+    setCurrentAction({ name: "crop", args });
+    setSidebar(false);
+  };
+
+  return (
+    <div className="sidebar-crop">
+      <h4>Crop</h4>
+      <div className="sidebar-crop-ratios">
+        <ButtonCrop
+          label="Freeform"
+          icon={<Crop />}
+          active={currentValue === "freeform"}
+          onClick={() => handleClick("freeform")}
+        />
+        <ButtonCrop
+          label="Original"
+          icon={<Image />}
+          active={currentValue === "original"}
+          onClick={() => handleClick("original")}
+        />
+        <ButtonCrop
+          label="1:1"
+          icon={<Square />}
+          active={currentValue === "1:1"}
+          onClick={() => handleClick("1:1")}
+        />
+      </div>
+    </div>
+  );
+};