@griddo/ax 11.11.8-rc.1 → 11.12.0

package/src/__tests__/components/Fields/Button/Button.test.tsx

@@ -1,22 +1,23 @@
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { mock } from "jest-mock-extended";
+import React from "react";
+
 import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import Button, { type IButtonProps } from "@ax/components/Button";
+import Button, { IButtonProps } from "@ax/components/Button";
 import { parseTheme } from "@ax/helpers";
 import globalTheme from "@ax/themes/theme.json";
 
 afterEach(cleanup);
 
-const createDefaultProps = (): IButtonProps => mock<IButtonProps>();
+const defaultProps = mock<IButtonProps>();
 
 describe("Button component rendering", () => {
 	it("should render the component with the default button and no icon", () => {
-		const props = createDefaultProps();
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -27,13 +28,12 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with the text button and an icon", () => {
-		const props = createDefaultProps();
-		props.buttonStyle = "text";
-		props.icon = "delete";
+		defaultProps.buttonStyle = "text";
+		defaultProps.icon = "delete";
 
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -44,11 +44,10 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with the line button", () => {
-		const props = createDefaultProps();
-		props.buttonStyle = "line";
+		defaultProps.buttonStyle = "line";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -57,12 +56,10 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the component with a className", () => {
-		const props = createDefaultProps();
-		props.className = "my-class";
-		props.buttonStyle = "line";
+		defaultProps.className = "my-class";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -72,11 +69,10 @@ describe("Button component rendering", () => {
 	});
 
 	it("should render the children", () => {
-		const props = createDefaultProps();
-		props.children = "el texto";
+		defaultProps.children = "el texto";
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -84,12 +80,13 @@ describe("Button component rendering", () => {
 	});
 
 	it("should trigger the onClick action", () => {
-		const props = createDefaultProps();
-		props.buttonStyle = "lineInverse";
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		defaultProps.buttonStyle = "lineInverse";
+		const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
+			(e: React.MouseEvent<HTMLButtonElement>) => void
+		>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 
@@ -100,13 +97,14 @@ describe("Button component rendering", () => {
 	});
 
 	it("should not trigger the onClick action if the button is disabled", () => {
-		const props = createDefaultProps();
-		props.buttonStyle = "lineInverse";
-		props.disabled = true;
-		const handleOnClickMock = props.onClick as jest.MockedFunction<(e: React.MouseEvent<HTMLButtonElement>) => void>;
+		defaultProps.buttonStyle = "lineInverse";
+		defaultProps.disabled = true;
+		const handleOnClickMock = defaultProps.onClick as jest.MockedFunction<
+			(e: React.MouseEvent<HTMLButtonElement>) => void
+		>;
 		render(
 			<ThemeProvider theme={parseTheme(globalTheme)}>
-				<Button {...props} />
+				<Button {...defaultProps} />
 			</ThemeProvider>,
 		);
 

package/src/__tests__/components/ResizePanel/ResizePanel.test.tsx

@@ -151,6 +151,6 @@ describe("ResizePanel mouse events", () => {
 		fireEvent.mouseUp(window);
 
 		const width = getComputedStyle(rightPanel).width;
-		expect(width).toBe("368px");
+		expect(width).toBe("344px");
 	});
 });

package/src/components/Browser/index.tsx

@@ -1,36 +1,20 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { IShareData } from "@ax/api";
 import { shareToken as shareTokenApi } from "@ax/api";
-import { BrowserContent, Icon, OcassionalToast, Select, SharePageModal, Toast, Tooltip } from "@ax/components";
+import { OcassionalToast } from "@ax/components";
 import { findByEditorID } from "@ax/forms";
 import { DEV_NOW, getShareTokenInfo } from "@ax/helpers";
 import { useModal, useOnMessageReceivedFromIframe, useToast } from "@ax/hooks";
-import type { HeadingFilter } from "@ax/types";
 
-import { calcAutoZoom, calcDefaultResolution } from "./utils";
+import BrowserContent from "../BrowserContent";
+import Icon from "../Icon";
+import SharePageModal from "../SharePageModal";
+import Toast from "../Toast";
+import Tooltip from "../Tooltip";
 
 import * as S from "./style";
 
-const DEFAULT_RESOLUTION = "1280px";
-
-const resolutionOptions = [
-	{ value: "1920px", label: "1920px" },
-	{ value: "1440px", label: "1440px" },
-	{ value: "1280px", label: "1280px" },
-	{ value: "1024px", label: "1024px" },
-	{ value: "768px", label: "768px" },
-	{ value: "360px", label: "360px" },
-];
-
-const zoomOptions = [
-	{ value: "reset", label: "Reset" },
-	{ value: "100", label: "100%" },
-	{ value: "75", label: "75%" },
-	{ value: "50", label: "50%" },
-	{ value: "25", label: "25%" },
-];
-
 const Browser = (props: IBrowserProps): JSX.Element => {
 	const {
 		url,
@@ -49,27 +33,15 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		browserRef,
 		actions,
 		editorType = "page",
-		headingFilter,
-		keywordsFilter,
-		toggleHeadingsPreview,
-		toggleKeywordsPreview,
 	} = props;
 
 	const { id, entity, haveDraftPage } = content;
 	const domain = window.location.origin;
-	const headingFilterParam = !headingFilter || headingFilter === "all" ? "" : `&headingFilter=${headingFilter}`;
-	const keywordsFilterParam = !keywordsFilter || !keywordsFilter.length ? "" : `&keywordFilter=${keywordsFilter}`;
+	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}`;
 	const isPageEditor = editorType === "page";
 	const isFormEditor = editorType === "form";
-	const isHeadingsEditor = editorType === "headings";
-	const isKeywordsEditor = editorType === "keywords";
 
-	const frameWrapperRef = useRef<HTMLDivElement>(null);
-
-	const [previewResolution, setPreviewResolution] = useState("desktop");
-	const [dimensions, setDimensions] = useState({ resolution: DEFAULT_RESOLUTION, zoom: "100" });
-
-	const urlPreview = `${domain}/editor/page-preview?preview=${!!isPreview}&disabled=${!!disabled}&type=${editorType}${headingFilterParam}${keywordsFilterParam}`;
+	const [resolution, setResolution] = useState("desktop");
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	const { isOpen: isShareOpen, toggleModal: toggleSharePageModal } = useModal(false, true);
 	const [shareData, setShareData] = useState<IShareData | null>(null);
@@ -81,24 +53,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 	useEffect(() => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
-
-		const el = frameWrapperRef.current;
-		if (!el) return;
-
-		let lastWidth = 0;
-		const observer = new ResizeObserver(([entry]) => {
-			const containerWidth = entry.contentRect.width;
-			if (containerWidth > 0 && Math.abs(containerWidth - lastWidth) > 20) {
-				lastWidth = containerWidth;
-				const resolution = calcDefaultResolution(containerWidth, resolutionOptions);
-				const newZoom = calcAutoZoom(containerWidth, resolution);
-				setDimensions({ resolution, zoom: newZoom });
-			}
-		});
-
-		observer.observe(el);
-
-		return () => observer.disconnect();
 	}, []);
 
 	// Fetch share data when in preview mode
@@ -131,254 +85,159 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 		}
 	};
 
-	const getWidth = (res: string) => {
-		if (!isPreview) return dimensions.resolution;
-
-		switch (res) {
-			case "tablet":
-				return "768px";
-			case "phone":
-				return "425px";
-			default:
-				return "100%";
-		}
+	const deleteModuleSelected = (editorID: number) => {
+		actions?.setSelectedContentAction(0);
+		actions?.deleteModuleAction?.([editorID]);
 	};
 
-	const moduleActions = useMemo(
-		() => ({
-			deleteModuleAction: (editorID: number) => {
-				actions?.setSelectedContentAction(0);
-				actions?.deleteModuleAction?.([editorID]);
-			},
-			duplicateModuleAction: (editorID: number) => {
-				const duplicatedEditorID = actions?.duplicateModuleAction?.([editorID]);
-				duplicatedEditorID && actions?.setSelectedContentAction(duplicatedEditorID);
-			},
-			copyModuleAction: (editorID: number) => {
-				const isCopied = actions?.copyModuleAction?.([editorID]);
-				isCopied && toggleToast("1 module copied to clipboard");
-			},
-		}),
-		[actions, toggleToast],
-	);
-
-	const maxFittingZoom = parseInt(calcAutoZoom(frameWrapperRef.current?.clientWidth ?? 0, dimensions.resolution));
-	const zoomOptionsWithDisabled = useMemo(() => {
-		const isCurrentZoomInOptions = zoomOptions.some((opt) => opt.value === dimensions.zoom);
-		return [
-			...(!isCurrentZoomInOptions ? [{ value: dimensions.zoom, label: `${dimensions.zoom}%` }] : []),
-			...zoomOptions.map((option) => ({
-				...option,
-				isDisabled: option.value === "reset" ? !isCurrentZoomInOptions : parseInt(option.value) > maxFittingZoom,
-			})),
-		];
-	}, [dimensions.zoom, maxFittingZoom]);
-
-	const handleResolutionChange = (resolution: string) => {
-		const containerWidth = frameWrapperRef.current?.clientWidth ?? 0;
-		setDimensions({ resolution, zoom: calcAutoZoom(containerWidth, resolution) });
+	const duplicateModuleSelected = (editorID: number) => {
+		const duplicatedEditorID = actions?.duplicateModuleAction?.([editorID]);
+		duplicatedEditorID && actions?.setSelectedContentAction(duplicatedEditorID);
 	};
 
-	const handleZoomChange = (zoom: string) => {
-		if (zoom === "reset") {
-			const containerWidth = frameWrapperRef.current?.clientWidth ?? 0;
-			setDimensions((prev) => ({ ...prev, zoom: calcAutoZoom(containerWidth, prev.resolution) }));
-		} else {
-			setDimensions((prev) => ({ ...prev, zoom }));
-		}
+	const copyModuleSelected = (editorID: number) => {
+		const isCopied = actions?.copyModuleAction?.([editorID]);
+		isCopied && toggleToast("1 module copied to clipboard");
 	};
 
-	const scaledWidth = !isPreview
-		? Math.floor(parseInt(dimensions.resolution) * (parseInt(dimensions.zoom) / 100))
-		: undefined;
-
-	const isCompact = scaledWidth !== undefined && scaledWidth <= 400;
-	const floatingNoteConfig = isHeadingsEditor
-		? { label: "Headings", onClick: toggleHeadingsPreview }
-		: isKeywordsEditor
-			? { label: "Keywords", onClick: toggleKeywordsPreview }
-			: null;
+	const moduleActions = {
+		deleteModuleAction: deleteModuleSelected,
+		duplicateModuleAction: duplicateModuleSelected,
+		copyModuleAction: copyModuleSelected,
+	};
 
 	return (
-		<S.OuterContainer ref={frameWrapperRef}>
-			<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef} scaledWidth={scaledWidth} isPreview={isPreview}>
-				{(isPageEditor || isHeadingsEditor || isKeywordsEditor) && (
-					<S.NavBar>
-						<S.NavUrl>{url}</S.NavUrl>
-						{isPreview ? (
-							<S.NavActions data-testid="nav-actions-wrapper">
-								<S.IconWrapper
-									data-testid="icon-wrapper-browser"
-									onClick={haveDraftPage ? undefined : toggleSharePageModal}
-									active={!haveDraftPage}
+		<S.BrowserWrapper data-testid="browser-wrapper" ref={browserRef}>
+			{isPageEditor && (
+				<S.NavBar>
+					<S.NavUrl>{url}</S.NavUrl>
+					{isPreview && (
+						<S.NavActions data-testid="nav-actions-wrapper">
+							<S.IconWrapper
+								data-testid="icon-wrapper-browser"
+								onClick={haveDraftPage ? undefined : toggleSharePageModal}
+								active={!haveDraftPage}
+							>
+								<Tooltip
+									hideOnClick={!haveDraftPage}
+									content={
+										haveDraftPage ? "Only available for drafts. This page already has a public URL." : "Share draft"
+									}
+									bottom
 								>
-									<Tooltip
-										hideOnClick={!haveDraftPage}
-										content={
-											haveDraftPage ? "Only available for drafts. This page already has a public URL." : "Share draft"
-										}
-										bottom
-									>
-										<Icon name="share" size="24" />
-									</Tooltip>
-								</S.IconWrapper>
-								<S.IconWrapper active={previewResolution === "desktop"} onClick={() => setPreviewResolution("desktop")}>
-									<Tooltip content="Desktop" bottom>
-										<Icon name="desktop" size="24" />
-									</Tooltip>
-								</S.IconWrapper>
-								<S.IconWrapper
-									data-testid="icon-res-tablet"
-									active={previewResolution === "tablet"}
-									onClick={() => setPreviewResolution("tablet")}
-								>
-									<Tooltip content="Tablet" bottom>
-										<Icon name="tablet" size="24" />
-									</Tooltip>
-								</S.IconWrapper>
-								<S.IconWrapper
-									data-testid="icon-res-phone"
-									active={previewResolution === "phone"}
-									onClick={() => setPreviewResolution("phone")}
-								>
-									<Tooltip content="Mobile" bottom>
-										<Icon name="phone" size="24" />
-									</Tooltip>
-								</S.IconWrapper>
-							</S.NavActions>
-						) : (
-							<S.NavActions data-testid="nav-actions-wrapper">
-								<S.ResolutionWrapper>
-									<S.SelectLabel>Screen</S.SelectLabel>
-									<Select
-										name="resolution"
-										options={resolutionOptions}
-										value={dimensions.resolution}
-										onChange={handleResolutionChange}
-										type="round"
-										offSet="30%"
-										mandatory
-									/>
-								</S.ResolutionWrapper>
-								<S.ZoomWrapper>
-									<Select
-										name="zoom"
-										options={zoomOptionsWithDisabled}
-										value={dimensions.zoom}
-										onChange={handleZoomChange}
-										type="round"
-										mandatory
-									/>
-								</S.ZoomWrapper>
-							</S.NavActions>
-						)}
-					</S.NavBar>
-				)}
-				{showIframe ? (
-					<S.ContentWrapper>
-						{floatingNoteConfig && (
-							<S.StyledFloatingNote
-								message={`You are viewing the ${floatingNoteConfig.label} editor${isCompact ? "" : " of this page"}`}
-								btnText={isCompact ? "Back" : "Back to Page Editor"}
-								onClick={floatingNoteConfig.onClick}
-								$compact={isCompact}
-							/>
-						)}
-						<S.FrameWrapper
-							hasBorder={isPageEditor || isHeadingsEditor || isKeywordsEditor}
-							isFormEditor={isFormEditor}
-							data-testid="navbar-iframe-wrapper"
-						>
-							{isPreview ? (
-								<iframe
-									title="Preview"
-									width={getWidth(previewResolution)}
-									height="100%"
-									src={urlPreview}
-									loading="lazy"
-									className="frame-content"
-								/>
-							) : (
-								<div
-									style={{
-										width: `${scaledWidth}px`,
-										height: "100%",
-										overflow: "hidden",
-										flexShrink: 0,
-									}}
-								>
-									<iframe
-										title="Preview"
-										width={dimensions.resolution}
-										src={urlPreview}
-										loading="lazy"
-										className="frame-content"
-										style={{
-											display: "block",
-											transform: `scale(${parseInt(dimensions.zoom) / 100})`,
-											transformOrigin: "0 0",
-											height: `${Math.round(100 / (parseInt(dimensions.zoom) / 100))}%`,
-										}}
-									/>
-								</div>
-							)}
-						</S.FrameWrapper>
-					</S.ContentWrapper>
-				) : (
-					<S.Wrapper data-testid="browser-content-wrapper" className="browser-content">
-						<BrowserContent
-							cloudinaryName={cloudinaryName}
-							theme={theme}
-							socials={socials}
-							siteLangs={siteLangs}
-							selectEditorID={selectEditorID}
-							siteID={siteID}
-							isPage={isPage}
-							content={content}
-							header={header}
-							footer={footer}
-							languageID={content.language}
-							pageLanguages={content.pageLanguages}
-							moduleActions={moduleActions}
-							renderer="editor"
-						/>
-					</S.Wrapper>
-				)}
-				{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
-				{isPreview && shareData && tokenInfo && (
-					<OcassionalToast
-						message={
-							<>
-								{tokenInfo.tokenHasExpired
-									? `Access to this draft link expired on ${tokenInfo.tokenExpirationDate}. You need to generate a `
-									: `This draft link expires on ${tokenInfo.tokenExpirationDate}. ${tokenInfo.tokenCanBeRenewed ? "Renew it" : "Open details"}${" "}`}
-								<button type="button" onClick={toggleSharePageModal}>
-									<strong style={{ textDecoration: "underline" }}>
-										{tokenInfo.tokenHasExpired ? "new one" : "here"}
-									</strong>
-								</button>
-							</>
-						}
-						icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
+									<Icon name="share" size="24" />
+								</Tooltip>
+							</S.IconWrapper>
+							<S.IconWrapper active={resolution === "desktop"} onClick={() => setResolution("desktop")}>
+								<Tooltip content="Desktop" bottom>
+									<Icon name="desktop" size="24" />
+								</Tooltip>
+							</S.IconWrapper>
+							<S.IconWrapper
+								data-testid="icon-res-tablet"
+								active={resolution === "tablet"}
+								onClick={() => setResolution("tablet")}
+							>
+								<Tooltip content="Tablet" bottom>
+									<Icon name="tablet" size="24" />
+								</Tooltip>
+							</S.IconWrapper>
+							<S.IconWrapper
+								data-testid="icon-res-phone"
+								active={resolution === "phone"}
+								onClick={() => setResolution("phone")}
+							>
+								<Tooltip content="Mobile" bottom>
+									<Icon name="phone" size="24" />
+								</Tooltip>
+							</S.IconWrapper>
+						</S.NavActions>
+					)}
+				</S.NavBar>
+			)}
+
+			{showIframe ? (
+				<S.FrameWrapper hasBorder={isPageEditor} isFormEditor={isFormEditor} data-testid="navbar-iframe-wrapper">
+					<iframe
+						title="Preview"
+						width={getWidth(resolution)}
+						height="100%"
+						src={urlPreview}
+						loading="lazy"
+						className="frame-content"
 					/>
-				)}
-
-				{isPreview && (
-					<SharePageModal
-						pageTitle={content.title}
-						isOpen={isShareOpen}
-						hide={toggleSharePageModal}
-						pageID={id}
-						entity={entity}
-						shareData={shareData}
-						onShareChange={setShareData}
+				</S.FrameWrapper>
+			) : (
+				<S.Wrapper
+					data-testid="browser-content-wrapper"
+					// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
+					ref={(ref: any) => ((window as any).browserRef = ref)}
+					className="browser-content"
+				>
+					<BrowserContent
+						cloudinaryName={cloudinaryName}
+						theme={theme}
+						socials={socials}
+						siteLangs={siteLangs}
+						selectEditorID={selectEditorID}
+						siteID={siteID}
+						isPage={isPage}
+						content={content}
+						header={header}
+						footer={footer}
+						languageID={content.language}
+						pageLanguages={content.pageLanguages}
+						moduleActions={moduleActions}
+						renderer="editor"
 					/>
-				)}
-			</S.BrowserWrapper>
-		</S.OuterContainer>
+				</S.Wrapper>
+			)}
+
+			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
+
+			{isPreview && shareData && tokenInfo && (
+				<OcassionalToast
+					message={
+						<>
+							{tokenInfo.tokenHasExpired
+								? `Access to this draft link expired on ${tokenInfo.tokenExpirationDate}. You need to generate a `
+								: `This draft link expires on ${tokenInfo.tokenExpirationDate}. ${tokenInfo.tokenCanBeRenewed ? "Renew it" : "Open details"}${" "}`}
+							<button type="button" onClick={toggleSharePageModal}>
+								<strong style={{ textDecoration: "underline" }}>
+									{tokenInfo.tokenHasExpired ? "new one" : "here"}
+								</strong>
+							</button>
+						</>
+					}
+					icon={tokenInfo.tokenHasExpired ? "hide" : "view"}
+				/>
+			)}
+
+			{isPreview && (
+				<SharePageModal
+					pageTitle={content.title}
+					isOpen={isShareOpen}
+					hide={toggleSharePageModal}
+					pageID={id}
+					entity={entity}
+					shareData={shareData}
+					onShareChange={setShareData}
+				/>
+			)}
+		</S.BrowserWrapper>
 	);
 };
 
+function getWidth(res: string) {
+	switch (res) {
+		case "tablet":
+			return "768px";
+		case "phone":
+			return "425px";
+		default:
+			return "100%";
+	}
+}
 export interface IBrowserProps {
 	content: any;
 	header?: any;
@@ -394,11 +253,7 @@ export interface IBrowserProps {
 	isPreview?: boolean;
 	showIframe?: boolean;
 	browserRef?: React.RefObject<HTMLDivElement>;
-	editorType?: "form" | "page" | "headings" | "keywords";
-	headingFilter?: HeadingFilter;
-	keywordsFilter?: string[];
-	toggleHeadingsPreview?(): void;
-	toggleKeywordsPreview?(): void;
+	editorType?: "form" | "page";
 	actions?: {
 		setSelectedContentAction(editorID: number): void;
 		deleteModuleAction?(editorID: number[]): void;