chore: Update react-image-crop and related dependencies

- Upgrade react-image-crop from 11.0.5 to 11.0.7
- Remove @types/react-image-crop dependency
- Modify ImageCrop component to support undefined aspect ratio
- Add new CoverImage story demonstrating flexible image cropping

Author: agjs

package.json

@@ -144,14 +144,13 @@
     "@tiptap/extension-youtube": "2.2.4",
     "@tiptap/react": "2.2.4",
     "@tiptap/suggestion": "2.2.4",
-    "@types/react-image-crop": "8.1.6",
     "boring-avatars": "1.10.1",
     "classnames": "2.5.1",
     "prosemirror-state": "1.4.3",
     "react-colorful": "5.6.1",
     "react-copy-to-clipboard": "5.1.0",
     "react-datepicker": "7.5.0",
-    "react-image-crop": "11.0.5",
+    "react-image-crop": "11.0.7",
     "react-select": "5.8.0",
     "react-select-async-paginate": "0.7.3",
     "react-step-wizard": "5.3.11",

pnpm-lock.yaml

@@ -20,7 +20,7 @@ const ImageCrop: FC<IImageCropProps> = ({
   setCrop,
   circularCrop,
   locked,
-  aspect = 1,
+  aspect = undefined,
   imgCropWrapperClassName,
   imgCropClassName
 }) => {
@@ -41,6 +41,7 @@ const ImageCrop: FC<IImageCropProps> = ({
       centerCrop(
         makeAspectCrop(
           {
+            height: crop.height,
             unit: crop.unit as PixelCrop["unit"],
             width: crop.width
           },

src/Components/ImageCrop/index.tsx

@@ -115,4 +115,71 @@ export const WithImageCrop = () => {
   );
 };
 
+export const CoverImage = () => {
+  const [image, setImage] = useState<string>("");
+  const [croppedImage, setCroppedImage] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [crop, setCrop] = useState<Crop>({
+    unit: "px",
+    width: 1024,
+    height: 612,
+    x: 0,
+    y: 0
+  });
+
+  const args = {
+    accept: "image/*",
+    className: "",
+    maxFileSize: 5000000,
+    allowedMimeTypes: ["image/jpeg", "image/png"],
+    compression: { enabled: true },
+    label: "Select an image",
+    onFileLoaded: (file: IOnFileLoadedArgs) => {
+      setImage(file.base64);
+    }
+  };
+
+  const handleCropComplete = async (croppedImage: Blob) => {
+    const compressedImage = (await ImageUtils.compress(croppedImage as File, {
+      maxWidth: 1024,
+      quality: 0.7
+    })) as string;
+
+    setCroppedImage(compressedImage);
+  };
+
+  return (
+    <div>
+      <div className='yl-flex yl-flex-col yl-items-start yl-gap-2'>
+        {image && (
+          <ImageCrop
+            setCrop={setCrop}
+            crop={crop}
+            src={image}
+            onComplete={handleCropComplete}
+            locked={false}
+            aspect={undefined}
+            imgCropWrapperClassName='yl-w-[1024px] yl-h-[612px]'
+          />
+        )}
+        <br />
+        {croppedImage && (
+          <div className='yl-relative yl-h-[192px] yl-w-[1024px]'>
+            <img
+              className='yl-absolute yl-h-full yl-w-full bg-yl-left-top object-cover'
+              src={croppedImage}
+            />
+          </div>
+        )}
+      </div>
+
+      <ImageInput
+        {...args}
+        onValidationError={({ message }) => setError(message)}
+        error={error}
+      />
+    </div>
+  );
+};
+
 export default ImageInputStories;