@ews-admin/global-design-system 1.17.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -62,7 +62,8 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "lucide-react": "^0.544.0"
+    "lucide-react": "^0.544.0",
+    "react-easy-crop": "^6.0.2"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/ImageCropModal/ImageCropModal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useState } from "react";
+// react-easy-crop's .d.ts uses `export type *` which Node moduleResolution
+// can't resolve as a value. Cast to any here — we own all props passed below.
+import EasyCrop from "react-easy-crop";
+import type { Area, Point } from "react-easy-crop";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Cropper = EasyCrop as unknown as React.ComponentType<any>;
+
+import { Modal } from "../Modal/Modal";
+import { getCroppedFile } from "./cropImage";
+
+export interface ImageCropModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Object URL of the image to crop (created with URL.createObjectURL) */
+  imageSrc: string;
+  /** Original file name — used to derive the extension of the cropped file */
+  originalFileName: string;
+  /**
+   * Locked aspect ratio for the crop area.
+   * Pass 1 for 1:1 (profile photos), 3 for 3:1 (banners), 4/3, etc.
+   * Defaults to 1 (square).
+   */
+  aspectRatio?: number;
+  /** Called when the user cancels or closes the modal */
+  onClose: () => void;
+  /**
+   * Called with the cropped File after the user confirms.
+   * The File is a JPEG produced from the selected crop region.
+   */
+  onCropComplete: (croppedFile: File) => void;
+  // ── Label props (pass translated strings from the consuming app) ──
+  title?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  zoomLabel?: string;
+}
+
+export const ImageCropModal: React.FC<ImageCropModalProps> = ({
+  isOpen,
+  imageSrc,
+  originalFileName,
+  aspectRatio = 1,
+  onClose,
+  onCropComplete,
+  title = "Crop image",
+  confirmLabel = "Crop & Upload",
+  cancelLabel = "Cancel",
+  zoomLabel = "Zoom",
+}) => {
+  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+  const [isCropping, setIsCropping] = useState(false);
+
+  const handleCropComplete = useCallback((_: Area, pixels: Area) => {
+    setCroppedAreaPixels(pixels);
+  }, []);
+
+  const handleConfirm = async () => {
+    if (!croppedAreaPixels) return;
+    setIsCropping(true);
+    try {
+      const file = await getCroppedFile(imageSrc, croppedAreaPixels, originalFileName);
+      onCropComplete(file);
+    } finally {
+      setIsCropping(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      size="lg"
+      primaryAction={confirmLabel}
+      secondaryAction={cancelLabel}
+      onPrimaryAction={handleConfirm}
+      onSecondaryAction={onClose}
+      isLoading={isCropping}
+      closeOnOverlayClick={false}
+    >
+      <div className="relative h-80 w-full bg-gray-900">
+        <Cropper
+          image={imageSrc}
+          crop={crop}
+          zoom={zoom}
+          aspect={aspectRatio}
+          onCropChange={setCrop}
+          onZoomChange={setZoom}
+          onCropComplete={handleCropComplete}
+        />
+      </div>
+      <div className="mt-4 px-1">
+        <label className="mb-1 block text-sm text-gray-500">{zoomLabel}</label>
+        <input
+          type="range"
+          min={1}
+          max={3}
+          step={0.05}
+          value={zoom}
+          onChange={(e) => setZoom(Number(e.target.value))}
+          className="w-full accent-ews-primary"
+        />
+      </div>
+    </Modal>
+  );
+};

package/src/components/ImageCropModal/cropImage.ts

@@ -0,0 +1,48 @@
+import type { Area } from "react-easy-crop";
+
+export async function getCroppedFile(
+  imageSrc: string,
+  pixelCrop: Area,
+  originalFileName: string,
+): Promise<File> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get 2d canvas context");
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height,
+  );
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error("canvas.toBlob produced no output"));
+        return;
+      }
+      const ext =
+        originalFileName.substring(originalFileName.lastIndexOf(".")) || ".jpg";
+      resolve(new File([blob], `cropped${ext}`, { type: "image/jpeg" }));
+    }, "image/jpeg");
+  });
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.addEventListener("load", () => resolve(img));
+    img.addEventListener("error", reject);
+    img.src = src;
+  });
+}

package/src/components/ImageCropModal/index.ts

@@ -0,0 +1,2 @@
+export { ImageCropModal } from "./ImageCropModal";
+export type { ImageCropModalProps } from "./ImageCropModal";

package/src/index.ts

@@ -22,6 +22,9 @@ export type {
   ProfileImageUploadProps,
 } from "./components/ProfileImageUpload";
 
+export { ImageCropModal } from "./components/ImageCropModal";
+export type { ImageCropModalProps } from "./components/ImageCropModal";
+
 export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
 export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";