pixedi 1.0.0 → 1.0.2

package/src/shared/components/ImageEditor/header/Header.tsx

@@ -1,81 +0,0 @@
-import { useState } from "react";
-import { ArrowLeft, Check, Undo, Redo, Loader } from "../assets/icons";
-import { useImageEditorContext } from "../provider/useImageEditorContext";
-import { Button } from "../ui";
-import type { FuncSaveArgs } from "../types";
-import "./header.css";
-
-type HeaderProps = {
-  onBack: () => void;
-  onSave: FuncSaveArgs;
-};
-
-export const Header = ({ onBack, onSave }: HeaderProps) => {
-  const [isSaving, setIsSaving] = useState(false);
-  const {
-    history,
-    undo,
-    redo,
-    resetHistory,
-    resetHistoryAfterSave,
-    getLastHistoryItem,
-  } = useImageEditorContext();
-
-  const { base64 } = getLastHistoryItem();
-  const showHistory = history.items.length > 1 && !isSaving;
-  const disabledUndo = history.pointer === 0;
-  const disabledRedo = history.pointer === history.items.length - 1;
-  const disableSave = history.items.length < 2 || isSaving;
-
-  const handleSave = async () => {
-    if (!base64) return;
-    setIsSaving(true);
-    try {
-      await onSave(base64);
-      resetHistoryAfterSave();
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <div className="header">
-      <Button variant="ghost" className="btn-rect" onClick={onBack}>
-        <ArrowLeft />
-      </Button>
-
-      <div className="header-tools">
-        {showHistory && (
-          <div className="header-history">
-            <Button
-              variant="outline"
-              disabled={disabledUndo}
-              className="btn-rect"
-              onClick={undo}
-            >
-              <Undo />
-            </Button>
-            <div className="header-history-text">
-              {history.pointer + 1}/{history.items.length}
-            </div>
-            <Button
-              variant="outline"
-              disabled={disabledRedo}
-              className="btn-rect"
-              onClick={redo}
-            >
-              <Redo />
-            </Button>
-          </div>
-        )}
-        <Button variant="outline" disabled={isSaving} onClick={resetHistory}>
-          Reset
-        </Button>
-        <Button disabled={disableSave} onClick={handleSave}>
-          {isSaving ? <Loader /> : <Check />}
-          Save
-        </Button>
-      </div>
-    </div>
-  );
-};

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

@@ -1,27 +0,0 @@
-.header {
-  height: 48px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-left: 8px;
-  padding-right: 8px;
-  box-sizing: border-box;
-  background-color: var(--background);
-  border-bottom: 1px solid var(--border);
-}
-
-.header-tools {
-  display: flex;
-  gap: 8px;
-}
-
-.header-history {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.header-history-text {
-  color: var(--muted-foreground);
-  font-size: 14px;
-}

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

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

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

@@ -1,5 +0,0 @@
-export { useImageLoader } from "./useImageLoader";
-export { useImageProcessor } from "./useImageProcessor";
-export { useMobile } from "./useMobile";
-export { useBellow } from "./useBellow";
-export { useAbove } from "./useAbove";

package/src/shared/components/ImageEditor/hooks/useAbove.tsx

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { breakpoints, type Breakpoint } from "../types";
-
-export function useAbove(breakpoint: Breakpoint): boolean {
-  const [isAbove, setIsAbove] = useState(
-    () => window.innerWidth >= breakpoints[breakpoint],
-  );
-
-  useEffect(() => {
-    function handleResize() {
-      setIsAbove(window.innerWidth >= breakpoints[breakpoint]);
-    }
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoint]);
-
-  return isAbove;
-}

package/src/shared/components/ImageEditor/hooks/useBellow.tsx

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-import { breakpoints, type Breakpoint } from "../types";
-
-export function useBellow(breakpoint: Breakpoint): boolean {
-  const [isBellow, setIsBellow] = useState(
-    () => window.innerWidth < breakpoints[breakpoint],
-  );
-
-  useEffect(() => {
-    function handleResize() {
-      setIsBellow(window.innerWidth < breakpoints[breakpoint]);
-    }
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoint]);
-
-  return isBellow;
-}

package/src/shared/components/ImageEditor/hooks/useImageLoader.tsx

@@ -1,110 +0,0 @@
-import { useEffect, useState } from "react";
-
-const mimeToExt: Record<string, string> = {
-  "image/jpeg": "jpg",
-  "image/jpg": "jpg",
-  "image/png": "png",
-  "image/gif": "gif",
-  "image/webp": "webp",
-};
-
-type UseImageResult = {
-  loading: boolean;
-  error: string | null;
-  width: number;
-  height: number;
-  extension: string | null;
-  base64: string | null;
-};
-
-export const useImageLoader = (src: string): UseImageResult => {
-  const [state, setState] = useState<UseImageResult>({
-    loading: true,
-    error: null,
-    width: 0,
-    height: 0,
-    extension: null,
-    base64: null,
-  });
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const processImage = async () => {
-      try {
-        const response = await fetch(src);
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        const mimeType = response.headers.get("content-type") || "";
-        const cleanMime = mimeType.split(";")[0].toLowerCase().trim();
-        const isImg = cleanMime.startsWith("image/");
-
-        const extension = mimeToExt[cleanMime] || "unknown";
-
-        if (!isImg) {
-          if (isMounted) {
-            setState((prev) => ({
-              ...prev,
-              loading: false,
-              error: "The requested resource is not a valid image.",
-              extension,
-            }));
-          }
-          return;
-        }
-
-        const blob = await response.blob();
-        const base64String = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onloadend = () => resolve(reader.result as string);
-          reader.onerror = () =>
-            reject(new Error("Failed to read image data stream"));
-          reader.readAsDataURL(blob);
-        });
-
-        const dimensions = await new Promise<{ width: number; height: number }>(
-          (resolve, reject) => {
-            const img = new Image();
-            img.src = base64String;
-            img.onload = () =>
-              resolve({ width: img.naturalWidth, height: img.naturalHeight });
-            img.onerror = () =>
-              reject(new Error("Failed to parse image dimensions"));
-          },
-        );
-
-        if (isMounted) {
-          setState({
-            loading: false,
-            error: null,
-            width: dimensions.width,
-            height: dimensions.height,
-            extension,
-            base64: base64String,
-          });
-        }
-      } catch (err: unknown) {
-        if (isMounted) {
-          setState((prev) => ({
-            ...prev,
-            loading: false,
-            error:
-              err instanceof Error
-                ? err.message
-                : "An error occurred during extraction.",
-          }));
-        }
-      }
-    };
-
-    processImage();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [src]);
-
-  return state;
-};

package/src/shared/components/ImageEditor/hooks/useImageProcessor.test.tsx

@@ -1,147 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useImageProcessor } from "./useImageProcessor";
-
-const bitmap = {
-  width: 120,
-  height: 80,
-  close: vi.fn(),
-};
-
-const context = {
-  clearRect: vi.fn(),
-  drawImage: vi.fn(),
-  filter: "",
-  restore: vi.fn(),
-  rotate: vi.fn(),
-  save: vi.fn(),
-  scale: vi.fn(),
-  translate: vi.fn(),
-};
-
-const validPng = "data:image/png;base64,aGVsbG8=";
-const validJpeg = "data:image/jpeg;base64,aGVsbG8=";
-
-describe("useImageProcessor", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.stubGlobal("createImageBitmap", vi.fn().mockResolvedValue(bitmap));
-    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
-      context as unknown as CanvasRenderingContext2D,
-    );
-    vi.spyOn(HTMLCanvasElement.prototype, "toDataURL").mockReturnValue(
-      "data:image/png;base64,processed",
-    );
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    vi.unstubAllGlobals();
-  });
-
-  it("rejects malformed Base64 before attempting to decode an image", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await expect(result.current.resize("invalid", 10, 10)).rejects.toThrow(
-      "Invalid Base64 image format",
-    );
-    expect(createImageBitmap).not.toHaveBeenCalled();
-  });
-
-  it("resizes an image and serializes PNG output without a quality argument", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await expect(result.current.resize(validPng, 60, 40)).resolves.toBe(
-      "data:image/png;base64,processed",
-    );
-
-    expect(createImageBitmap).toHaveBeenCalledTimes(1);
-    expect(context.clearRect).toHaveBeenCalledWith(0, 0, 60, 40);
-    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0, 60, 40);
-    expect(bitmap.close).toHaveBeenCalledTimes(1);
-    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
-      "image/png",
-    );
-  });
-
-  it("crops an image with source and destination rectangles", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await result.current.crop(validPng, 5, 6, 50, 40);
-
-    expect(context.drawImage).toHaveBeenCalledWith(
-      bitmap,
-      5,
-      6,
-      50,
-      40,
-      0,
-      0,
-      50,
-      40,
-    );
-    expect(bitmap.close).toHaveBeenCalledTimes(1);
-  });
-
-  it("flips an image using the expected canvas transforms", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await result.current.flip(validPng, true, false);
-
-    expect(context.translate).toHaveBeenCalledWith(120, 0);
-    expect(context.scale).toHaveBeenCalledWith(-1, 1);
-    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0);
-    expect(context.restore).toHaveBeenCalledTimes(1);
-    expect(bitmap.close).toHaveBeenCalledTimes(1);
-  });
-
-  it("rotates an image around its center", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await result.current.rotate(validPng, 90);
-
-    expect(context.translate).toHaveBeenCalledWith(60, 40);
-    expect(context.rotate).toHaveBeenCalledWith(Math.PI / 2);
-    expect(context.drawImage).toHaveBeenCalledWith(bitmap, -60, -40);
-    expect(context.restore).toHaveBeenCalledTimes(1);
-  });
-
-  it("applies filters and uses quality for JPEG output", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-
-    await result.current.filter(validJpeg, { brightness: 120, contrast: 90 });
-
-    expect(context.filter).toBe("brightness(120%) contrast(90%)");
-    expect(context.drawImage).toHaveBeenCalledWith(bitmap, 0, 0);
-    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
-      "image/jpeg",
-      0.85,
-    );
-  });
-
-  it("uses quality for WebP output", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-    const webp = "data:image/webp;base64,aGVsbG8=";
-
-    await result.current.resize(webp, 60, 40);
-
-    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
-      "image/webp",
-      0.85,
-    );
-  });
-
-  it("processes GIF input as PNG", async () => {
-    const { result } = renderHook(() => useImageProcessor());
-    const gif = "data:image/gif;base64,aGVsbG8=";
-
-    await result.current.resize(gif, 60, 40);
-
-    expect(createImageBitmap).toHaveBeenCalledWith(
-      expect.objectContaining({ type: "image/png" }),
-    );
-    expect(HTMLCanvasElement.prototype.toDataURL).toHaveBeenCalledWith(
-      "image/png",
-    );
-  });
-});

package/src/shared/components/ImageEditor/hooks/useImageProcessor.ts

@@ -1,225 +0,0 @@
-import { useCallback, useRef } from "react";
-
-export interface ImageProcessor {
-  resize: (base64Str: string, width: number, height: number) => Promise<string>;
-  crop: (
-    base64Str: string,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-  ) => Promise<string>;
-  flip: (
-    base64Str: string,
-    horizontal: boolean,
-    vertical: boolean,
-  ) => Promise<string>;
-  rotate: (base64Str: string, angle: number) => Promise<string>;
-  filter: (
-    base64Str: string,
-    filters: Record<string, number>,
-  ) => Promise<string>;
-}
-
-export const useImageProcessor = (): ImageProcessor => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  const parseBase64 = useCallback((base64Str: string) => {
-    const match = base64Str.match(/^data:(image\/[a-zA-Z+.-]+);base64,(.+)$/);
-    if (!match) {
-      throw new Error("Invalid Base64 image format");
-    }
-
-    let mimeType = match[1];
-    const rawData = match[2];
-
-    if (mimeType === "image/gif") {
-      mimeType = "image/png";
-    }
-
-    return { mimeType, rawData };
-  }, []);
-
-  const getBitmap = useCallback(
-    async (
-      base64Str: string,
-    ): Promise<{ bitmap: ImageBitmap; mimeType: string }> => {
-      const { mimeType, rawData } = parseBase64(base64Str);
-
-      const binaryStr = atob(rawData);
-      const bytes = new Uint8Array(binaryStr.length);
-      for (let i = 0; i < binaryStr.length; i++) {
-        bytes[i] = binaryStr.charCodeAt(i);
-      }
-
-      const blob = new Blob([bytes], { type: mimeType });
-      const bitmap = await createImageBitmap(blob);
-
-      return { bitmap, mimeType };
-    },
-    [parseBase64],
-  );
-
-  const getContext = useCallback((mimeType: string) => {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement("canvas");
-    }
-    const canvas = canvasRef.current;
-
-    // Enable alpha channel for formats that support transparency
-    const requiresAlpha = mimeType === "image/png" || mimeType === "image/webp";
-    const ctx = canvas.getContext("2d", { alpha: requiresAlpha });
-
-    return { canvas, ctx };
-  }, []);
-
-  const finalizeCanvas = useCallback(
-    (canvas: HTMLCanvasElement, mimeType: string): string => {
-      // PNG format does not support quality parameter
-      if (mimeType === "image/jpeg" || mimeType === "image/webp") {
-        return canvas.toDataURL(mimeType, 0.85);
-      }
-      return canvas.toDataURL(mimeType); // for PNG
-    },
-    [],
-  );
-
-  // 1. RESIZE
-  const resize = useCallback(
-    async (
-      base64Str: string,
-      width: number,
-      height: number,
-    ): Promise<string> => {
-      const { bitmap, mimeType } = await getBitmap(base64Str);
-      const { canvas, ctx } = getContext(mimeType);
-
-      canvas.width = width;
-      canvas.height = height;
-
-      if (ctx) {
-        ctx.clearRect(0, 0, width, height);
-        ctx.drawImage(bitmap, 0, 0, width, height);
-      }
-
-      bitmap.close();
-      return finalizeCanvas(canvas, mimeType);
-    },
-    [getBitmap, getContext, finalizeCanvas],
-  );
-
-  // 2. CROP
-  const crop = useCallback(
-    async (
-      base64Str: string,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-    ): Promise<string> => {
-      const { bitmap, mimeType } = await getBitmap(base64Str);
-      const { canvas, ctx } = getContext(mimeType);
-
-      canvas.width = width;
-      canvas.height = height;
-
-      if (ctx) {
-        ctx.clearRect(0, 0, width, height);
-        ctx.drawImage(bitmap, x, y, width, height, 0, 0, width, height);
-      }
-
-      bitmap.close();
-      return finalizeCanvas(canvas, mimeType);
-    },
-    [getBitmap, getContext, finalizeCanvas],
-  );
-
-  // 3. FLIP
-  const flip = useCallback(
-    async (
-      base64Str: string,
-      horizontal: boolean,
-      vertical: boolean,
-    ): Promise<string> => {
-      const { bitmap, mimeType } = await getBitmap(base64Str);
-      const { canvas, ctx } = getContext(mimeType);
-
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
-
-      if (ctx) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.save();
-        ctx.translate(
-          horizontal ? bitmap.width : 0,
-          vertical ? bitmap.height : 0,
-        );
-        ctx.scale(horizontal ? -1 : 1, vertical ? -1 : 1);
-        ctx.drawImage(bitmap, 0, 0);
-        ctx.restore();
-      }
-
-      bitmap.close();
-      return finalizeCanvas(canvas, mimeType);
-    },
-    [getBitmap, getContext, finalizeCanvas],
-  );
-
-  // 4. Rotate
-  const rotate = useCallback(
-    async (base64Str: string, angle: number): Promise<string> => {
-      const { bitmap, mimeType } = await getBitmap(base64Str);
-      const { canvas, ctx } = getContext(mimeType);
-
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
-
-      if (ctx) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.save();
-        ctx.translate(bitmap.width / 2, bitmap.height / 2);
-        ctx.rotate((angle * Math.PI) / 180);
-        ctx.drawImage(bitmap, -bitmap.width / 2, -bitmap.height / 2);
-        ctx.restore();
-      }
-
-      bitmap.close();
-      return finalizeCanvas(canvas, mimeType);
-    },
-    [getBitmap, getContext, finalizeCanvas],
-  );
-
-  // 5. Filter
-  const filter = useCallback(
-    async (
-      base64Str: string,
-      filters: Record<string, number>,
-    ): Promise<string> => {
-      const { bitmap, mimeType } = await getBitmap(base64Str);
-      const { canvas, ctx } = getContext(mimeType);
-
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
-
-      if (ctx) {
-        const filterString = Object.entries(filters)
-          .map(([name, value]) => `${name}(${value}%)`)
-          .join(" ");
-        ctx.filter = filterString;
-        ctx.drawImage(bitmap, 0, 0);
-      }
-
-      bitmap.close();
-      return finalizeCanvas(canvas, mimeType);
-    },
-    [getBitmap, getContext, finalizeCanvas],
-  );
-
-  return {
-    resize,
-    crop,
-    flip,
-    rotate,
-    filter,
-  };
-};

package/src/shared/components/ImageEditor/hooks/useMobile.tsx

@@ -1,33 +0,0 @@
-import { useState } from "react";
-
-type MobileDevice =
-  | "android"
-  | "ios"
-  | "windows-phone"
-  | "blackberry"
-  | "opera-mini"
-  | "mobile"
-  | null;
-
-const detectMobileDevice = (): MobileDevice => {
-  if (typeof window === "undefined" || !window.navigator) {
-    return null;
-  }
-
-  const ua = window.navigator.userAgent.toLowerCase();
-
-  if (/android/.test(ua)) return "android";
-  if (/iphone|ipad|ipod/.test(ua)) return "ios";
-  if (/windows phone/.test(ua)) return "windows-phone";
-  if (/blackberry|bb10/.test(ua)) return "blackberry";
-  if (/opera mini/.test(ua)) return "opera-mini";
-  if (/mobile/.test(ua)) return "mobile";
-
-  return null;
-};
-
-export const useMobile = (): MobileDevice => {
-  const [mobile] = useState<MobileDevice>(() => detectMobileDevice());
-
-  return mobile;
-};