@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/components/ImageDragAndDrop/CropStep/style.tsx

@@ -0,0 +1,101 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	justify-content: space-between;
+`;
+
+const CropArea = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+`;
+
+const CropContent = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	position: relative;
+`;
+
+const CropContainer = styled.div`
+	position: relative;
+	width: 236px;
+	height: 236px;
+	border-radius: 50%;
+	overflow: hidden;
+	flex-shrink: 0;
+`;
+
+const ZoomControls = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: ${(p) => p.theme.spacing.xs};
+	position: absolute;
+	right: -48px;
+	top: 50%;
+	transform: translateY(-50%);
+	pointer-events: none;
+`;
+
+const ZoomButton = styled.button`
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: ${(p) => p.theme.color.interactive01};
+	font-size: 24px;
+	line-height: 1;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	pointer-events: auto;
+
+	&:hover {
+		opacity: 0.7;
+	}
+`;
+
+const ZoomSlider = styled.input`
+	appearance: slider-vertical;
+	writing-mode: vertical-lr;
+	direction: rtl;
+	width: 4px;
+	height: 120px;
+	cursor: pointer;
+	accent-color: ${(p) => p.theme.color.interactive01};
+	pointer-events: auto;
+`;
+
+const CancelButtonContainer = styled.div`
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin-top: ${(p) => p.theme.spacing.s};
+`;
+
+const Actions = styled.div`
+	display: flex;
+	gap: ${(p) => p.theme.spacing.m};
+	justify-content: flex-end;
+	width: 100%;
+`;
+
+export {
+	Wrapper,
+	CropArea,
+	CropContent,
+	CropContainer,
+	ZoomControls,
+	ZoomButton,
+	ZoomSlider,
+	CancelButtonContainer,
+	Actions,
+};

package/src/{modules/MediaGallery → components}/ImageDragAndDrop/index.tsx

@@ -1,15 +1,20 @@
-import React, { memo, useEffect, useRef, useState } from "react";
+import type React from "react";
+import { memo, useEffect, useRef, useState } from "react";
+import type { Area } from "react-easy-crop";
 import { connect } from "react-redux";
 
-import { Icon, DragAndDrop, ProgressBar } from "@ax/components";
-import { IGetFolderParams, IImage, IRootState } from "@ax/types";
+import { DragAndDrop, Icon, ProgressBar } from "@ax/components";
+import { VALID_IMAGE_FORMATS } from "@ax/constants";
 import { galleryActions } from "@ax/containers/Gallery";
+import { getCroppedImg } from "@ax/helpers";
+import type { IGetFolderParams, IImage, IRootState } from "@ax/types";
+
+import CropStep from "./CropStep";
 
 import * as S from "./style";
 
 const ImageDragAndDrop = (props: IProps) => {
 	const {
-		validFormats,
 		isUploading,
 		isSuccess,
 		isError,
@@ -28,15 +33,18 @@ const ImageDragAndDrop = (props: IProps) => {
 		visible = true,
 		getParams,
 		setUploadSuccess,
+		withCrop = false,
+		maxImages,
 	} = props;
 
-	const validExtensions = validFormats.map((format) => `.${format}`).join(",");
+	const validExtensions = VALID_IMAGE_FORMATS.map((format) => `.${format}`).join(",");
 	const filesInputRef = useRef<HTMLInputElement | null>(null);
 	const filesButtonRef = useRef<HTMLButtonElement | null>(null);
+	const dropDepthRef = useRef(0);
 	const [inDropZone, setInDropZone] = useState(false);
-	const [dropDepth, setDropDepth] = useState(0);
 	const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
 	const [progress, setProgress] = useState(0);
+	const [cropImageSrc, setCropImageSrc] = useState<string | null>(null);
 
 	const uploading = isUploading || uploadingState.total > uploadingState.ready;
 	const success = isSuccess && uploadingState.total === uploadingState.ready;
@@ -46,13 +54,15 @@ const ImageDragAndDrop = (props: IProps) => {
 	}, [setUploadSuccess]);
 
 	const handleDragEnter = () => {
-		setDropDepth((depth) => depth + 1);
+		dropDepthRef.current++;
+		setInDropZone(true);
 	};
 
 	const handleDragLeave = () => {
-		setDropDepth((depth) => depth - 1);
-		if (dropDepth > 1) return;
-		setInDropZone(false);
+		dropDepthRef.current--;
+		if (dropDepthRef.current === 0) {
+			setInDropZone(false);
+		}
 	};
 
 	const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -60,44 +70,70 @@ const ImageDragAndDrop = (props: IProps) => {
 		setInDropZone(true);
 	};
 
-	const checkType = (fileName: string) => {
-		const fileNameArray = fileName.split(".");
-		if (validFormats.includes(fileNameArray[fileNameArray.length - 1])) {
-			return true;
-		}
-		return false;
+	const isValidFileType = (fileName: string): boolean => {
+		const extension = fileName.split(".").pop()?.toLowerCase();
+		return extension ? VALID_IMAGE_FORMATS.includes(extension) : false;
 	};
 
-	const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-		const files = Array.from(e.dataTransfer.files);
-		if (handleMultipleUpload && files.length > 1) {
-			if (!files.every((file) => checkType(file.name))) {
-				uploadError(true, "Invalid format");
-			} else {
-				handleMultipleUpload(files);
-			}
-		} else {
-			await uploadFiles(files);
-		}
-		setDropDepth(0);
+	const validateFiles = (files: File[]): boolean => {
+		return files.every((file) => isValidFileType(file.name));
 	};
 
-	const handleFilesUpload = async (e: any) => {
-		const files: File[] = Array.from(e.currentTarget.files);
+	const readFileAsDataUrl = (file: File): Promise<string> =>
+		new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				const result = e.target?.result;
+				if (typeof result === "string") resolve(result);
+				else reject(new Error("Failed to read file"));
+			};
+			reader.onerror = () => reject(new Error("Failed to read file"));
+			reader.readAsDataURL(file);
+		});
+
+	const handleUploadAction = async (files: File[]) => {
+		if (maxImages && files.length > maxImages) {
+			uploadError(true, `Maximum ${maxImages} image${maxImages !== 1 ? "s" : ""} allowed`);
+			return;
+		}
+
 		if (handleMultipleUpload && files.length > 1) {
-			if (!files.every((file) => checkType(file.name))) {
+			if (!validateFiles(files)) {
 				uploadError(true, "Invalid format");
 			} else {
 				handleMultipleUpload(files);
 			}
+		} else if (withCrop && files.length === 1) {
+			if (!validateFiles(files)) {
+				uploadError(true, "Invalid format");
+				return;
+			}
+			try {
+				const dataUrl = await readFileAsDataUrl(files[0]);
+				setCropImageSrc(dataUrl);
+			} catch (_error) {
+				uploadError(true, "Failed to load image");
+			}
 		} else {
-			await uploadFiles(files);
+			uploadFiles(files);
 		}
 	};
 
+	const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+		const files = Array.from(e.dataTransfer.files);
+		handleUploadAction(files);
+		dropDepthRef.current = 0;
+		setInDropZone(false);
+	};
+
+	const handleFilesUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files: File[] = Array.from(e.currentTarget.files || []);
+		handleUploadAction(files);
+	};
+
 	const uploadFiles = async (files: File[]) => {
 		try {
-			if (!files.every((file) => checkType(file.name))) {
+			if (!validateFiles(files)) {
 				uploadError(true, "Invalid format");
 				return;
 			}
@@ -132,7 +168,8 @@ const ImageDragAndDrop = (props: IProps) => {
 				}, delay);
 			}
 		} catch (error) {
-			console.log(error);
+			uploadError(true, "Upload failed. Please try again.");
+			console.error("Upload error:", error);
 		}
 	};
 
@@ -142,6 +179,21 @@ const ImageDragAndDrop = (props: IProps) => {
 		resetError();
 	};
 
+	const handleCropConfirm = async (croppedAreaPixels: Area) => {
+		if (!cropImageSrc) return;
+		try {
+			const croppedFile = await getCroppedImg(cropImageSrc, croppedAreaPixels);
+			setCropImageSrc(null);
+			uploadFiles([croppedFile]);
+		} catch (_error) {
+			uploadError(true, "Failed to crop image");
+		}
+	};
+
+	const handleCropCancel = () => {
+		setCropImageSrc(null);
+	};
+
 	const handleFileClick = () => {
 		if (filesInputRef) {
 			filesInputRef.current?.click();
@@ -156,7 +208,7 @@ const ImageDragAndDrop = (props: IProps) => {
 			onDragOver={handleDragOver}
 			onDragEnter={handleDragEnter}
 			onDragLeave={handleDragLeave}
-			validFormats={validFormats}
+			validFormats={VALID_IMAGE_FORMATS}
 		>
 			<S.StatusWrapper onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
 				<S.DragStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
@@ -165,7 +217,13 @@ const ImageDragAndDrop = (props: IProps) => {
 					</S.DragIcon>
 					<S.DragTitle>Drag your image here</S.DragTitle>
 					<S.DragSubtitle>or</S.DragSubtitle>
-					<S.FilesInput type="file" ref={filesInputRef} multiple accept={validExtensions} onInput={handleFilesUpload} />
+					<S.FilesInput
+						type="file"
+						ref={filesInputRef}
+						multiple={!maxImages || maxImages > 1}
+						accept={validExtensions}
+						onInput={handleFilesUpload}
+					/>
 					<S.FilesButton
 						ref={filesButtonRef}
 						type="button"
@@ -176,7 +234,7 @@ const ImageDragAndDrop = (props: IProps) => {
 						Select images
 					</S.FilesButton>
 					<S.DragSubtitle>
-						Valid formats: {validFormats.join(", ")}.
+						Valid formats: {VALID_IMAGE_FORMATS.join(", ")}.
 						<br />
 						Max. size: 50MB
 					</S.DragSubtitle>
@@ -187,7 +245,7 @@ const ImageDragAndDrop = (props: IProps) => {
 					</S.DropIcon>
 					<S.DragTitle>Drop your image</S.DragTitle>
 					<S.DragSubtitle>
-						Valid formats: {validFormats.join(", ")}.
+						Valid formats: {VALID_IMAGE_FORMATS.join(", ")}.
 						<br />
 						Max. size: 50MB
 					</S.DragSubtitle>
@@ -213,9 +271,13 @@ const ImageDragAndDrop = (props: IProps) => {
 				success={success}
 				error={isError}
 				inverse={inverse}
+				cropping={!!cropImageSrc}
 			>
 				{isAllowedToUpload ? renderDragAndDrop() : renderPlaceholder()}
 			</S.DragAndDropWrapper>
+			<S.CropWrapper cropping={!!cropImageSrc}>
+				{cropImageSrc && <CropStep imageSrc={cropImageSrc} onConfirm={handleCropConfirm} onCancel={handleCropCancel} />}
+			</S.CropWrapper>
 			<S.UploadingWrapper
 				inDropZone={inDropZone}
 				uploading={uploading}
@@ -226,7 +288,7 @@ const ImageDragAndDrop = (props: IProps) => {
 				<S.StatusWrapper>
 					<S.UploadingStatus>
 						<S.DragIcon>
-							<Icon name="page" size="48" />
+							<Icon name="image" size="48" />
 						</S.DragIcon>
 						<S.ProgressBar>
 							<ProgressBar percentage={progress} inverse={inverse} />
@@ -256,7 +318,6 @@ const ImageDragAndDrop = (props: IProps) => {
 };
 
 interface IProps {
-	validFormats: string[];
 	isUploading: boolean;
 	isSuccess: boolean;
 	isError: boolean;
@@ -267,6 +328,8 @@ interface IProps {
 	isAllowedToUpload?: boolean;
 	replaceData?: { fileID: number };
 	visible?: boolean;
+	withCrop?: boolean;
+	maxImages?: number;
 	handleUpload: (result: IImage[]) => void;
 	handleMultipleUpload?: (files: File[]) => void;
 	uploadError: (error: boolean, msg?: string) => Promise<void>;

package/src/{modules/MediaGallery → components}/ImageDragAndDrop/style.tsx

@@ -114,6 +114,7 @@ const DragAndDropWrapper = styled.div<{
 	success: boolean;
 	error: boolean;
 	inverse: boolean;
+	cropping: boolean;
 }>`
   border: ${(p) =>
 		`2px dashed ${p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
@@ -122,8 +123,8 @@ const DragAndDropWrapper = styled.div<{
 		p.inDropZone ? p.theme.color.interactive01 : p.inverse ? "transparent" : p.theme.color.uiBarBackground};
   width: 100%;
   height: 100%;
-  opacity: ${(p) => (p.uploading || p.success || p.error ? "0" : "1")};
-  display: ${(p) => (p.uploading || p.success || p.error ? "none" : "block")};
+  opacity: ${(p) => (p.uploading || p.success || p.error || p.cropping ? "0" : "1")};
+  display: ${(p) => (p.uploading || p.success || p.error || p.cropping ? "none" : "block")};
   transition: opacity 0.1s;
 
   ${DragStatus} {
@@ -237,6 +238,16 @@ const ProgressBar = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
+const CropWrapper = styled.div<{
+	cropping: boolean;
+}>`
+  width: 100%;
+  height: 100%;
+  opacity: ${(p) => (p.cropping ? "1" : "0")};
+  display: ${(p) => (p.cropping ? "block" : "none")};
+  transition: opacity 0.1s;
+`;
+
 export {
 	Wrapper,
 	StatusWrapper,
@@ -257,4 +268,5 @@ export {
 	FilesInput,
 	FilesButton,
 	ProgressBar,
+	CropWrapper,
 };

package/src/components/KeywordsPreviewModal/atoms.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import { FieldsBehavior, Modal } from "@ax/components";
 import type { IModal } from "@ax/types";
+import { Modal, FieldsBehavior } from "@ax/components";
 
 import * as S from "./style";
 
@@ -39,7 +39,7 @@ const AddKeywordsModal = (props: IAddKeywordsModal) => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={288}
+			height={282}
 		>
 			<S.ModalContent>
 				<FieldsBehavior

package/src/components/KeywordsPreviewModal/index.tsx

@@ -69,16 +69,16 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 						)}
 						<S.KeywordsListWrapper>
 							{keywords.length === 0 && <S.StyledSummaryButton />}
-							{keywords.map((keyword, index) => {
-								const isSelected = keywordsFilter.includes(keyword);
+							{Object.keys(keywordCounts).map((key, index) => {
+								const isSelected = keywordsFilter.includes(key);
 								return (
 									<KeywordItem
-										keyword={keyword}
-										count={keywordCounts[keyword] ?? 0}
+										keyword={key}
+										count={keywordCounts[key]}
 										isSelected={isSelected}
-										onClick={handleAddTag(keyword)}
+										onClick={handleAddTag(key)}
 										deleteKeyword={handleDeleteKeyword}
-										key={`${keyword}-${index}`}
+										key={`${key}-${index}`}
 									/>
 								);
 							})}

package/src/components/KeywordsPreviewModal/utils.tsx

@@ -6,11 +6,11 @@ const countKeywords = (html: HTMLDivElement, keywords: string[]) => {
 		return {};
 	}
 
-	const htmlContent = frameContent.innerText.toLowerCase().normalize("NFC");
+	const htmlContent = frameContent.innerText.toLowerCase();
 	const keywordCounts: Record<string, number> = {};
 
 	keywords.forEach((keyword) => {
-		const lowerKeyword = keyword.toLowerCase().normalize("NFC");
+		const lowerKeyword = keyword.toLowerCase();
 		const regex = new RegExp(lowerKeyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
 		const matches = htmlContent.match(regex);
 		keywordCounts[keyword] = matches ? matches.length : 0;

package/src/components/ProfileImage/index.tsx

@@ -0,0 +1,55 @@
+import { memo } from "react";
+
+import { Icon, Image, ImageDragAndDrop, Modal } from "@ax/components";
+import { useModal } from "@ax/hooks";
+import type { IImage } from "@ax/types";
+
+import * as S from "./style";
+
+const ProfileImage = (props: IProfileImageProps) => {
+	const { imageUrl, size = 96, handleImage } = props;
+
+	const { isOpen, toggleModal } = useModal(false);
+
+	const handleUpload = (images: IImage[]) => {
+		handleImage(images[0]);
+		toggleModal();
+	};
+
+	return (
+		<>
+			<S.FieldWrapper size={size} data-testid="profile-image-wrapper" onClick={toggleModal}>
+				{imageUrl ? (
+					<S.ImageContainer>
+						<Image url={imageUrl} width={size} />
+					</S.ImageContainer>
+				) : (
+					<S.DefaultImage>
+						<S.IconWrapper>
+							<Icon name="image" size="40" />
+						</S.IconWrapper>
+					</S.DefaultImage>
+				)}
+				<S.HoverOverlay>Edit Avatar</S.HoverOverlay>
+			</S.FieldWrapper>
+			<Modal isOpen={isOpen} hide={toggleModal} size="M" height={416} title="Upload Media">
+				<ImageDragAndDrop
+					siteID={"global"}
+					isAllowedToUpload={true}
+					handleUpload={handleUpload}
+					visible={false}
+					withCrop={true}
+					maxImages={1}
+				/>
+			</Modal>
+		</>
+	);
+};
+
+export interface IProfileImageProps {
+	imageUrl?: string;
+	size?: number;
+	handleImage: (image: IImage) => void;
+}
+
+export default memo(ProfileImage);

package/src/components/ProfileImage/style.tsx

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+
+const FieldWrapper = styled.div<{ size: number }>`
+  width: ${(p) => `${p.size}px`};
+  height: ${(p) => `${p.size}px`};
+  border: ${(p) => `2px solid ${p.theme.color.uiLine}`};
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    > div:last-child {
+      opacity: 1;
+    }
+  }
+`;
+
+const DefaultImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+`;
+
+const IconWrapper = styled.div``;
+
+const ImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+`;
+
+const HoverOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(0, 27, 60, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  ${(p) => p.theme.textStyle.uiM};
+  font-weight: 600;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+`;
+
+export { FieldWrapper, IconWrapper, DefaultImage, ImageContainer, HoverOverlay };

package/src/components/ResizePanel/ResizeHandle/index.tsx

@@ -1,11 +1,15 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 import * as S from "./style";
 
+const MIN_WIDTH = 368;
+const MAX_WIDTH = 1280;
+
 const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
-	const { onMouseMove } = props;
+	const { onMouseMove, currentWidth = 500 } = props;
 
 	const isDragging = useRef(false);
+	const handlerRef = useRef<HTMLDivElement>(null);
 
 	const handleResize = useCallback(
 		(e: MouseEvent) => {
@@ -13,7 +17,8 @@ const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
 			e.preventDefault();
 
 			const newWidth = document.body.offsetWidth - e.clientX;
-			onMouseMove(newWidth);
+			const validatedWidth = Math.max(MIN_WIDTH, Math.min(newWidth, MAX_WIDTH));
+			onMouseMove(validatedWidth);
 		},
 		[onMouseMove],
 	);
@@ -23,10 +28,30 @@ const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
 		document.body.classList.remove("no-select");
 	}, []);
 
-	const handleMouseDown = () => {
+	const handleMouseDown = useCallback(() => {
 		isDragging.current = true;
 		document.body.classList.add("no-select");
-	};
+	}, []);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>) => {
+			const step = 20;
+			let newWidth: number | null = null;
+
+			if (e.key === "ArrowRight") {
+				newWidth = Math.max(MIN_WIDTH, currentWidth - step);
+				e.preventDefault();
+			} else if (e.key === "ArrowLeft") {
+				newWidth = Math.min(MAX_WIDTH, currentWidth + step);
+				e.preventDefault();
+			}
+
+			if (newWidth !== null) {
+				onMouseMove(newWidth);
+			}
+		},
+		[onMouseMove, currentWidth],
+	);
 
 	useEffect(() => {
 		window.addEventListener("mousemove", handleResize);
@@ -56,11 +81,24 @@ const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
 		};
 	}, [handleResize]);
 
-	return <S.Handler onMouseDown={handleMouseDown} data-testid="handler" />;
+	return (
+		<S.Handler
+			ref={handlerRef}
+			onMouseDown={handleMouseDown}
+			onKeyDown={handleKeyDown}
+			tabIndex={0}
+			role="slider"
+			aria-label="Panel resize handle"
+			aria-valuemin={MIN_WIDTH}
+			aria-valuemax={MAX_WIDTH}
+			data-testid="handler"
+		/>
+	);
 };
 
 export interface IResizeHandleProps {
 	onMouseMove: (value: number) => void;
+	currentWidth?: number;
 }
 
 export default ResizeHandle;

package/src/components/ResizePanel/ResizeHandle/style.tsx

@@ -10,9 +10,16 @@ const Handler = styled.div`
   z-index: 1;
   transform: translateX(${(p) => p.theme.spacing.xs});
   flex-shrink: 0;
+  outline: none;
+  transition: background-color 0.2s ease;
+
   &:hover {
     background-color: ${(p) => p.theme.color.interactive01};
   }
+
+  &:focus-visible {
+    background-color: ${(p) => p.theme.color.interactive01};
+  }
 `;
 
 export { Handler };