pixedi 1.0.0 → 1.0.2

package/src/features/gallery/ImageEditPage.tsx

@@ -1,37 +0,0 @@
-import { useParams, useNavigate } from "react-router";
-import { imagesData } from "@/app/entries";
-import { ImageEditor } from "@/shared/components/ImageEditor";
-
-export const ImageEditPage = () => {
-  const navigate = useNavigate();
-  const { id } = useParams<{ id: string }>();
-  const image = imagesData.find((img) => img.id === id);
-
-  if (!image) {
-    return <div>Image not found</div>;
-  }
-
-  const handleSave = async (base64: string) => {
-    return new Promise<void>((resolve) => {
-      setTimeout(() => {
-        // TODO: Save the image
-        console.log(base64);
-        resolve();
-      }, 2000);
-    });
-  };
-
-  const handleCancel = () => {
-    navigate("/");
-  };
-
-  return (
-    <div className="w-full h-screen" style={{ width: "100%", height: "100vh" }}>
-      <ImageEditor
-        image={image.original}
-        onBack={handleCancel}
-        onSave={handleSave}
-      />
-    </div>
-  );
-};

package/src/features/gallery/index.ts

@@ -1,2 +0,0 @@
-export { GalleryPage } from "./GalleryPage";
-export { ImageEditPage } from "./ImageEditPage";

package/src/main.tsx

@@ -1,10 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "@/app/styles/index.css";
-import App from "@/app/App.tsx";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

package/src/shared/components/ImageCard/ImageCard.tsx

@@ -1,54 +0,0 @@
-// import { motion, type Variants } from "motion/react";
-// import { Link } from "react-router";
-// import type { Image } from "@/shared/types";
-
-// type ImageCardProps = {
-//   image: Image;
-// };
-
-// export const ImageCard = ({ image }: ImageCardProps) => {
-//   const imageVariants: Variants = {
-//     rest: { scale: 1, opacity: 0.5 },
-//     hover: {
-//       scale: 1.1,
-//       opacity: 1,
-//     },
-//   };
-
-//   return (
-//     <Link to={`/images/${image.id}`}>
-//       <motion.div
-//         className={`
-//           relative
-//           w-full aspect-4/3
-//           overflow-hidden cursor-pointer box-border
-//           border border-neutral-400
-//         `}
-//         whileHover="hover"
-//         initial="rest"
-//         animate="rest"
-//       >
-//         <motion.div
-//           className="absolute inset-0 opacity-50"
-//           variants={imageVariants}
-//           transition={{ duration: 0.3, ease: "easeIn" }}
-//           style={{
-//             backgroundImage: `url(${image.thumbnail})`,
-//             backgroundSize: "cover",
-//             backgroundPosition: "center",
-//           }}
-//         />
-//       </motion.div>
-//     </Link>
-//   );
-// };
-
-type ImageCardProps = {
-  image: {
-    id: string;
-  };
-};
-
-export const ImageCard = ({ image }: ImageCardProps) => {
-  return <div>{image.id}</div>;
-};

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

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

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

@@ -1,48 +0,0 @@
-import { Preloader } from "@/shared/components/ui";
-import { ImageEditorProvider } from "./provider/ImageEditorProvider";
-import { useImageLoader } from "./hooks";
-import { Header } from "./header";
-import { Frame } from "./frame";
-import { Sidebar } from "./sidebar";
-import type { FuncSaveArgs } from "./types";
-import "./index.css";
-
-type ImageEditorProps = {
-  image: string;
-  onSave: FuncSaveArgs;
-  onBack: () => void;
-};
-
-export const ImageEditor = ({ image, onSave, onBack }: ImageEditorProps) => {
-  const { loading, error, width, height, base64, extension } =
-    useImageLoader(image);
-
-  if (loading || error || !base64 || !extension) {
-    return (
-      <div className="picedi sys">
-        {loading && <Preloader size={48} />}
-        {error && <div className="text-red">{error}</div>}
-        {!loading && !error && (!base64 || !extension) && (
-          <div className="text-red">Failed to load image.</div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <ImageEditorProvider
-      base64={base64}
-      width={width}
-      height={height}
-      ext={extension}
-    >
-      <div className="picedi main">
-        <Header onSave={onSave} onBack={onBack} />
-        <div className="grid">
-          <Frame />
-          <Sidebar />
-        </div>
-      </div>
-    </ImageEditorProvider>
-  );
-};

package/src/shared/components/ImageEditor/assets/icons.tsx

@@ -1,114 +0,0 @@
-import * as React from "react";
-
-const baseSvgProps: React.ComponentPropsWithoutRef<"svg"> = {
-  xmlns: "http://w3.org",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-};
-
-export const Check = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M20 6 9 17l-5-5" />
-  </svg>
-);
-
-export const X = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M18 6 6 18" />
-    <path d="m6 6 12 12" />
-  </svg>
-);
-
-export const Lock = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-  </svg>
-);
-
-export const ArrowLeft = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="m12 19-7-7 7-7" />
-    <path d="M19 12H5" />
-  </svg>
-);
-
-export const ChevronDown = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="m6 9 6 6 6-6" />
-  </svg>
-);
-
-export const Undo = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M3 7v6h6" />
-    <path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" />
-  </svg>
-);
-
-export const Redo = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M21 7v6h-6" />
-    <path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" />
-  </svg>
-);
-
-export const Settings = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
-    <circle cx="12" cy="12" r="3" />
-  </svg>
-);
-
-export const Crop = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M6 2v14a2 2 0 0 0 2 2h14" />
-    <path d="M18 22V8a2 2 0 0 0-2-2H2" />
-  </svg>
-);
-
-export const Image = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-    <circle cx="9" cy="9" r="2" />
-    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
-  </svg>
-);
-
-export const Square = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <rect width="18" height="18" x="3" y="3" rx="2" />
-  </svg>
-);
-
-export const Fullscreen = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M3 7V5a2 2 0 0 1 2-2h2" />
-    <path d="M17 3h2a2 2 0 0 1 2 2v2" />
-    <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
-    <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
-    <rect width="10" height="8" x="7" y="8" rx="1" />
-  </svg>
-);
-
-export const Loader = (props: React.ComponentPropsWithoutRef<"svg">) => (
-  <svg {...baseSvgProps} {...props}>
-    <path d="M21 12a9 9 0 1 1-6.219-8.56">
-      <animateTransform
-        attributeType="xml"
-        attributeName="transform"
-        type="rotate"
-        from="0 12 12"
-        to="360 12 12"
-        dur="0.8s"
-        repeatCount="indefinite"
-      />
-    </path>
-  </svg>
-);

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

@@ -1,118 +0,0 @@
-export type PresetOptions = {
-  value: string;
-  label: string;
-  w: number;
-  h: number;
-  rightLabel?: string;
-};
-
-export type Preset = {
-  value: string;
-  label: string;
-  options: Array<PresetOptions>;
-};
-
-export const presetsData: Array<Preset> = [
-  {
-    label: "Facebook",
-    value: "facebook",
-    options: [
-      {
-        value: "facebook-post",
-        label: "Post",
-        w: 1200,
-        h: 630,
-        rightLabel: "1200 x 630",
-      },
-      {
-        value: "facebook-cover",
-        label: "Cover",
-        w: 851,
-        h: 315,
-        rightLabel: "851 x 315",
-      },
-      {
-        value: "facebook-profile",
-        label: "Profile",
-        w: 170,
-        h: 170,
-        rightLabel: "170 x 170",
-      },
-      {
-        value: "facebook-story",
-        label: "Story",
-        w: 1080,
-        h: 1920,
-        rightLabel: "1080 x 1920",
-      },
-    ],
-  },
-  {
-    label: "Instagram",
-    value: "instagram",
-    options: [
-      {
-        value: "instagram-landscape",
-        label: "Landscape",
-        w: 1080,
-        h: 566,
-        rightLabel: "1080 x 566",
-      },
-      {
-        value: "instagram-portait",
-        label: "Portait",
-        w: 1080,
-        h: 1350,
-        rightLabel: "1080 x 1350",
-      },
-      {
-        value: "instagram-square",
-        label: "Square",
-        w: 1080,
-        h: 1080,
-        rightLabel: "1080 x 1080",
-      },
-      {
-        value: "instagram-story",
-        label: "Story",
-        w: 1080,
-        h: 1920,
-        rightLabel: "1080 x 1920",
-      },
-      {
-        value: "instagram-thumbnail",
-        label: "Thumbnail",
-        w: 161,
-        h: 161,
-        rightLabel: "161 x 161",
-      },
-    ],
-  },
-  {
-    label: "LinkedIn",
-    value: "linkedin",
-    options: [
-      {
-        value: "linkedin-blog-post",
-        label: "Blog Post",
-        w: 1200,
-        h: 627,
-        rightLabel: "1200 x 627",
-      },
-      {
-        value: "linkedin-cover",
-        label: "Cover",
-        w: 1128,
-        h: 191,
-        rightLabel: "1128 x 191",
-      },
-      {
-        value: "linkedin-profile",
-        label: "Profile",
-        w: 400,
-        h: 400,
-        rightLabel: "400 x 400",
-      },
-    ],
-  },
-];

package/src/shared/components/ImageEditor/crop/Crop.tsx

@@ -1,60 +0,0 @@
-import { useRef } from "react";
-import { useImageEditorContext } from "../provider/useImageEditorContext";
-import {
-  CropBorders,
-  useCropInteraction,
-  CropPointers,
-  CropLines,
-  CropPointer,
-} from "../crop";
-import { getInitalCrop } from "../utils";
-import { useMobile } from "../hooks";
-import "./crop.css";
-
-export const Crop = () => {
-  const { getCurrentAction, getLastHistoryItem } = useImageEditorContext();
-  const currentAction = getCurrentAction();
-  const mobile = useMobile();
-
-  const imgRef = useRef<HTMLImageElement>(null);
-  const cropRef = useRef<HTMLDivElement>(null);
-
-  const { handleCropStart } = useCropInteraction({
-    imgRef,
-    cropRef,
-  });
-
-  if (!currentAction || currentAction.name !== "crop") {
-    return null;
-  }
-
-  const { width, height, base64 } = getLastHistoryItem();
-  const { x, y, w, h } = getInitalCrop(currentAction.args.ratio, width, height);
-
-  return (
-    <>
-      <img
-        ref={imgRef}
-        src={base64}
-        alt="Image"
-        className="crop-image"
-        style={{ clipPath: `xywh(${x}% ${y}% ${w}% ${h}%)` }}
-      />
-      <div
-        ref={cropRef}
-        className="crop-box"
-        style={{ width: `${w}%`, height: `${h}%`, top: `${y}%`, left: `${x}%` }}
-      >
-        <CropLines />
-        {mobile ? (
-          <CropPointer onMouseDown={handleCropStart} />
-        ) : (
-          <>
-            <CropBorders onMouseDown={handleCropStart} />
-            <CropPointers onMouseDown={handleCropStart} />
-          </>
-        )}
-      </div>
-    </>
-  );
-};

package/src/shared/components/ImageEditor/crop/CropBorders.tsx

@@ -1,28 +0,0 @@
-import type { Direction } from "../types";
-
-type CropBordersProps = {
-  onMouseDown: (e: React.MouseEvent, type: Direction, cursor: string) => void;
-};
-
-export const CropBorders = ({ onMouseDown }: CropBordersProps) => {
-  return (
-    <>
-      <span
-        className="crop-b crop-b-t"
-        onMouseDown={(e: React.MouseEvent) => onMouseDown(e, "t", "ns")}
-      />
-      <span
-        className="crop-b crop-b-r"
-        onMouseDown={(e) => onMouseDown(e, "r", "ew")}
-      />
-      <span
-        className="crop-b crop-b-b"
-        onMouseDown={(e) => onMouseDown(e, "b", "ns")}
-      />
-      <span
-        className="crop-b crop-b-l"
-        onMouseDown={(e) => onMouseDown(e, "l", "ew")}
-      />
-    </>
-  );
-};

package/src/shared/components/ImageEditor/crop/CropLines.tsx

@@ -1,8 +0,0 @@
-export const CropLines = () => {
-  return (
-    <div className="crop-l-box">
-      <span className="crop-l crop-l-v" />
-      <span className="crop-l crop-l-h" />
-    </div>
-  );
-};

package/src/shared/components/ImageEditor/crop/CropPointer.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import type { Direction } from "../types";
-
-type CropPointerProps = {
-  onMouseDown: (
-    e: React.MouseEvent | React.TouchEvent,
-    type: Direction,
-    cursor?: string,
-  ) => void;
-};
-
-export const CropPointer = ({ onMouseDown }: CropPointerProps) => {
-  return (
-    <div className="crop-p-b">
-      <div
-        className="crop-p-p"
-        onTouchStart={(e) => onMouseDown(e, "br", "nwse")}
-      />
-    </div>
-  );
-};

package/src/shared/components/ImageEditor/crop/CropPointers.tsx

@@ -1,44 +0,0 @@
-import type { Direction } from "../types";
-
-type CropPointersProps = {
-  onMouseDown: (e: React.MouseEvent, type: Direction, cursor: string) => void;
-};
-
-export const CropPointers = ({ onMouseDown }: CropPointersProps) => {
-  return (
-    <>
-      <span
-        className="crop-ps crop-ps-tl"
-        onMouseDown={(e) => onMouseDown(e, "tl", "nwse")}
-      />
-      <span
-        className="crop-ps crop-ps-t"
-        onMouseDown={(e) => onMouseDown(e, "t", "ns")}
-      />
-      <span
-        className="crop-ps crop-ps-tr"
-        onMouseDown={(e) => onMouseDown(e, "tr", "nesw")}
-      />
-      <span
-        className="crop-ps crop-ps-r"
-        onMouseDown={(e) => onMouseDown(e, "r", "ew")}
-      />
-      <span
-        className="crop-ps crop-ps-br"
-        onMouseDown={(e) => onMouseDown(e, "br", "nwse")}
-      />
-      <span
-        className="crop-ps crop-ps-b"
-        onMouseDown={(e) => onMouseDown(e, "b", "ns")}
-      />
-      <span
-        className="crop-ps crop-ps-bl"
-        onMouseDown={(e) => onMouseDown(e, "bl", "nesw")}
-      />
-      <span
-        className="crop-ps crop-ps-l"
-        onMouseDown={(e) => onMouseDown(e, "l", "ew")}
-      />
-    </>
-  );
-};