pixedi 1.0.0 → 1.0.2

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

@@ -1,145 +0,0 @@
-.picedi {
-  font-size: 16px;
-  font-family: var(--font-sans);
-
-  --font-sans:
-    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Tahoma,
-    Helvetica, Arial, sans-serif;
-
-  --color-white: #fff;
-  --color-black: #000;
-  --color-transparent: transparent;
-  --color-red: oklch(0.637 0.237 25.331);
-  --color-green: oklch(0.768 0.188 151.716);
-
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --accent-blue: oklch(0.609 0.221 251.687);
-  --accent-blue-light: oklch(0.96 0.02 250);
-  --destructive: oklch(0.577 0.245 27.325);
-  --success: oklch(0.768 0.188 151.716);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --radius: 4px;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --overlay-bg: color-mix(in srgb, var(--color-black) 50%, transparent);
-  --overlay-bg-white: color-mix(in srgb, var(--color-white) 80%, transparent);
-}
-
-:host([data-theme="dark"]) .picedi,
-[data-theme="dark"] .picedi,
-[data-theme="dark"].picedi {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --accent-blue-light: oklch(0.25 0.06 250);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  --overlay-bg: color-mix(in srgb, var(--color-black) 75%, transparent);
-}
-
-.picedi h1,
-.picedi h2,
-.picedi h3,
-.picedi h4,
-.picedi h5,
-.picedi h6 {
-  margin: 0;
-  font-weight: 600;
-}
-
-.text-red {
-  color: var(--color-red);
-}
-
-.bg-red {
-  background-color: var(--color-red);
-}
-
-.bg-green {
-  background-color: var(--color-green);
-}
-
-.text-green {
-  color: var(--color-green);
-}
-
-.mask {
-  background-color: var(--overlay-bg);
-}
-
-.semibold {
-  font-weight: 600;
-  letter-spacing: 0.4px;
-}
-
-.bold {
-  font-weight: bold;
-  letter-spacing: 0.4px;
-}
-
-.sys {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--muted-foreground);
-}
-
-.main {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  height: 100%;
-  overflow: hidden;
-  background-color: var(--background);
-}
-
-.grid {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  min-height: 0;
-  overflow: hidden;
-}

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

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

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

@@ -1,126 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,183 +0,0 @@
-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

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

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

@@ -1,56 +0,0 @@
-.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;
-}