@griddo/ax 11.11.8-rc.1 → 11.12.0

package/src/forms/fields.tsx

@@ -1,5 +1,6 @@
-import { FieldContainer, FieldGroup, FieldsBehavior } from "@ax/components";
-import type { IErrorItem, IPage, ISite } from "@ax/types";
+import React from "react";
+import { FieldContainer, FieldsBehavior } from "@ax/components";
+import { IErrorItem, IPage, ISite } from "@ax/types";
 
 const getInnerFields = (
 	innerFields: any[],
@@ -15,54 +16,48 @@ const getInnerFields = (
 ) => {
 	let fieldArr: any[] = [];
 
-	return innerFields?.map((singleFieldProps: any) => {
-		const { key } = singleFieldProps;
-		const error = errors?.find((err: any) => err.editorID === selectedContent.editorID && err.key === key);
+	return (
+		innerFields &&
+		innerFields.map((singleFieldProps: any) => {
+			const { key } = singleFieldProps;
+			const error = errors && errors.find((err: any) => err.editorID === selectedContent.editorID && err.key === key);
 
-		const isGroup = singleFieldProps.type === "FieldGroup";
-		const isCollapsed = isGroup && singleFieldProps.collapsed;
-		const isConditional = singleFieldProps.type === "ConditionalField";
-		const isArrayGroup = singleFieldProps.type === "ArrayFieldGroup";
+			if (singleFieldProps.type === "ConditionalField" || singleFieldProps.type === "ArrayFieldGroup") {
+				fieldArr = getInnerFields(
+					singleFieldProps.fields,
+					innerActions,
+					selectedContent,
+					isTemplateActivated,
+					theme,
+					moduleCopy,
+					parentDisabled,
+					site,
+					errors,
+					deleteError,
+				);
+			}
 
-		if (isGroup || isConditional || isArrayGroup) {
-			fieldArr = getInnerFields(
-				singleFieldProps.fields,
-				innerActions,
-				selectedContent,
-				isTemplateActivated,
-				theme,
-				moduleCopy,
-				parentDisabled,
-				site,
-				errors,
-				deleteError,
+			return (
+				<FieldContainer
+					key={key}
+					objKey={key}
+					innerFields={fieldArr}
+					field={singleFieldProps}
+					actions={innerActions}
+					selectedContent={selectedContent}
+					updateValue={innerActions.updateValue}
+					goTo={innerActions.goTo}
+					site={site}
+					{...singleFieldProps}
+					disabled={!isTemplateActivated || singleFieldProps.disabled || parentDisabled}
+					error={error}
+					deleteError={deleteError}
+					theme={theme}
+					moduleCopy={moduleCopy}
+				/>
 			);
-		}
-
-		return isGroup ? (
-			<FieldGroup key={key} title={singleFieldProps.title} collapsed={isCollapsed} solid={singleFieldProps.solid}>
-				{fieldArr}
-			</FieldGroup>
-		) : (
-			<FieldContainer
-				key={key}
-				objKey={key}
-				innerFields={fieldArr}
-				field={singleFieldProps}
-				actions={innerActions}
-				selectedContent={selectedContent}
-				updateValue={innerActions.updateValue}
-				goTo={innerActions.goTo}
-				site={site}
-				{...singleFieldProps}
-				disabled={!isTemplateActivated || singleFieldProps.disabled || parentDisabled}
-				error={error}
-				deleteError={deleteError}
-				theme={theme}
-				moduleCopy={moduleCopy}
-			/>
-		);
-	});
+		})
+	);
 };
 
 const getStructuredDataInnerFields = (
@@ -74,35 +69,38 @@ const getStructuredDataInnerFields = (
 ) => {
 	let fieldArr: any[] = [];
 
-	return innerFields?.map((singleFieldProps: any) => {
-		const { key, type, fields } = singleFieldProps;
+	return (
+		innerFields &&
+		innerFields.map((singleFieldProps: any) => {
+			const { key, type, fields } = singleFieldProps;
 
-		const handleChange = (newValue: any) => {
-			updateValue({ [key]: newValue });
-		};
+			const handleChange = (newValue: any) => {
+				updateValue({ [key]: newValue });
+			};
 
-		const value = content?.[key];
+			const value = content && content[key];
 
-		if (type === "ConditionalField" || type === "ArrayFieldGroup") {
-			fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
-		}
+			if (type === "ConditionalField" || type === "ArrayFieldGroup") {
+				fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme, errors);
+			}
 
-		const error = errors.find((err: any) => err.key === key);
+			const error = errors.find((err: any) => err.key === key);
 
-		const fieldProps = {
-			value,
-			objKey: key,
-			fieldType: type,
-			innerFields: fieldArr,
-			field: singleFieldProps,
-			onChange: handleChange,
-			...singleFieldProps,
-			theme,
-			error,
-		};
+			const fieldProps = {
+				value,
+				objKey: key,
+				fieldType: type,
+				innerFields: fieldArr,
+				field: singleFieldProps,
+				onChange: handleChange,
+				...singleFieldProps,
+				theme,
+				error,
+			};
 
-		return <FieldsBehavior key={key} {...fieldProps} />;
-	});
+			return <FieldsBehavior key={key} {...fieldProps} />;
+		})
+	);
 };
 
 export { getInnerFields, getStructuredDataInnerFields };

package/src/hooks/forms.tsx

@@ -26,27 +26,6 @@ const useDebounce = (value: any) => {
 	return debouncedValue;
 };
 
-const useDebouncedCallback = <T extends unknown[]>(callback: (...args: T) => void, delay: number) => {
-	const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-	const callbackRef = useRef(callback);
-
-	useEffect(() => {
-		callbackRef.current = callback;
-	}, [callback]);
-
-	return useCallback(
-		(...args: T) => {
-			if (delay === 0) {
-				callbackRef.current(...args);
-				return;
-			}
-			clearTimeout(timeoutRef.current);
-			timeoutRef.current = setTimeout(() => callbackRef.current(...args), delay);
-		},
-		[delay],
-	);
-};
-
 const useEqualStructured = (component: any) => {
 	return memo(component, (prevProps: any, newProps: any) => {
 		const { fieldKey } = prevProps;
@@ -255,4 +234,4 @@ const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent, d
 	return { isDirty, setIsDirty };
 };
 
-export { useDebounce, useDebouncedCallback, useEqualStructured, usePrevious, useIsDirty, useShouldBeSaved };
+export { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved };

package/src/hooks/index.tsx

@@ -1,19 +1,12 @@
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
-import {
-	useDebounce,
-	useDebouncedCallback,
-	useEqualStructured,
-	useIsDirty,
-	usePrevious,
-	useShouldBeSaved,
-} from "./forms";
+import { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved } from "./forms";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 import { useURLSearchParam } from "./location";
-import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
+import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
-import { useGlobalPermission, usePermission, usePermissions } from "./users";
+import { useGlobalPermission, usePermission } from "./users";
 import { useWindowSize } from "./window";
 
 export {
@@ -21,19 +14,16 @@ export {
 	useBulkSelection,
 	useCategoryColors,
 	useDebounce,
-	useDebouncedCallback,
 	useEmptyState,
 	useEqualStructured,
 	useGlobalPermission,
 	useHandleClickOutside,
 	useIsDirty,
 	useModal,
-	useModals,
 	useNetworkStatus,
 	useOnMessageReceivedFromIframe,
 	useOnMessageReceivedFromOutside,
 	usePermission,
-	usePermissions,
 	usePrevious,
 	useResizable,
 	useShouldBeSaved,

package/src/hooks/modals.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
@@ -6,26 +6,11 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 		setIsOpen(!isOpen);
 	};
 
-	useEffect(() => {
-		if (isOpen && bodyBlock) {
-			if (!document.body.classList.contains("modal-open")) {
-				document.body.classList.add("modal-open");
-			}
-			return () => {
-				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-				if (modals.length <= 1) {
-					document.body.classList.remove("modal-open");
-				}
-			};
-		} else if (!bodyBlock || !isOpen) {
-			// Solo eliminar si no hay modales abiertos
-			const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-			if (modals.length === 0) {
-				document.body.classList.remove("modal-open");
-			}
-		}
-	}, [isOpen, bodyBlock]);
+	if (isOpen && bodyBlock) {
+		document.body.classList.add("modal-open");
+	} else {
+		document.body.classList.remove("modal-open");
+	}
 
 	return {
 		isOpen,
@@ -33,66 +18,6 @@ const useModal = (initialState?: boolean, bodyBlock = true) => {
 	};
 };
 
-const useModals = <T extends string>(modalKeys: readonly T[], bodyBlock = true) => {
-	const [openModals, setOpenModals] = useState<Record<T, boolean>>(() =>
-		modalKeys.reduce(
-			(acc, key) => {
-				acc[key] = false;
-				return acc;
-			},
-			{} as Record<T, boolean>,
-		),
-	);
-
-	const toggleModal = useCallback((modalKey: T) => {
-		setOpenModals((prev) => ({ ...prev, [modalKey]: !prev[modalKey] }));
-	}, []);
-
-	const openModal = useCallback((modalKey: T) => {
-		setOpenModals((prev) => ({ ...prev, [modalKey]: true }));
-	}, []);
-
-	const closeModal = useCallback((modalKey: T) => {
-		setOpenModals((prev) => ({ ...prev, [modalKey]: false }));
-	}, []);
-
-	const isOpen = useCallback(
-		(modalKey: T) => {
-			return openModals[modalKey] || false;
-		},
-		[openModals],
-	);
-
-	useEffect(() => {
-		const hasOpenModals = Object.values(openModals).some(Boolean);
-
-		if (hasOpenModals && bodyBlock) {
-			if (!document.body.classList.contains("modal-open")) {
-				document.body.classList.add("modal-open");
-			}
-			return () => {
-				// Solo eliminar si no hay otros modales abiertos
-				const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-				if (modals.length <= 1) {
-					document.body.classList.remove("modal-open");
-				}
-			};
-		}
-		// Solo eliminar si no hay modales abiertos
-		const modals = document.querySelectorAll('[data-testid="modal-wrapper"]');
-		if (modals.length === 0) {
-			document.body.classList.remove("modal-open");
-		}
-	}, [openModals, bodyBlock]);
-
-	return {
-		toggleModal,
-		openModal,
-		closeModal,
-		isOpen,
-	};
-};
-
 const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEvent) => void) => {
 	useEffect(() => {
 		if (isOpen) {
@@ -110,32 +35,19 @@ const useHandleClickOutside = (isOpen: boolean, handleClickOutside: (e: MouseEve
 const useToast = () => {
 	const [isVisible, setIsVisible] = useState(false);
 	const [state, setState] = useState<any>(null);
-	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-	const toggleToast = useCallback((newState?: any) => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current);
-		}
+	let temp: any;
+	const setTemp = () => (temp = setTimeout(() => setIsVisible(false), 6000));
+	const stopTemp = () => clearTimeout(temp);
 
-		if (newState) {
-			setState(newState);
-		}
+	const toggleToast = (state?: unknown) => {
 		setIsVisible(true);
-
-		timeoutRef.current = setTimeout(() => {
-			setIsVisible(false);
-		}, 6000);
-	}, []);
-
-	useEffect(() => {
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-			}
-		};
-	}, []);
+		setTemp();
+		stopTemp();
+		state && setState(state);
+	};
 
 	return { isVisible, setIsVisible, toggleToast, state };
 };
 
-export { useModal, useModals, useHandleClickOutside, useToast };
+export { useModal, useHandleClickOutside, useToast };

package/src/hooks/users.tsx

@@ -1,11 +1,11 @@
-import { useMemo } from "react";
 import { useSelector } from "react-redux";
-
-import type { IRootState } from "@ax/types";
+import { IRootState } from "@ax/types";
 
 const usePermission = (permission: string | string[] | undefined): boolean => {
 	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const isSuperAdmin = useSelector(
+		(state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin,
+	);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -19,28 +19,11 @@ const usePermission = (permission: string | string[] | undefined): boolean => {
 	return isAllowedTo(arrayPermission);
 };
 
-const usePermissions = <T extends Record<string, string | string[]>>(permissions: T): Record<keyof T, boolean> => {
-	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
-
-	return useMemo(() => {
-		const isAllowedTo = (permission: string | string[]) => {
-			if (isSuperAdmin) return true;
-			const arrayPermission = Array.isArray(permission) ? permission : [permission];
-			return userPermissions && arrayPermission.some((perm: string) => userPermissions.includes(perm));
-		};
-
-		const result: Record<string, boolean> = {};
-		for (const key of Object.keys(permissions)) {
-			result[key] = isAllowedTo(permissions[key]);
-		}
-		return result as Record<keyof T, boolean>;
-	}, [permissions, userPermissions, isSuperAdmin]);
-};
-
 const useGlobalPermission = (permission: string | string[] | undefined): boolean => {
 	const userPermissions = useSelector((state: IRootState) => state.users.globalPermissions);
-	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+	const isSuperAdmin = useSelector(
+		(state: IRootState) => state.users.currentUser && state.users.currentUser.isSuperAdmin,
+	);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
@@ -54,4 +37,4 @@ const useGlobalPermission = (permission: string | string[] | undefined): boolean
 	return isAllowedTo(arrayPermission);
 };
 
-export { usePermission, usePermissions, useGlobalPermission };
+export { usePermission, useGlobalPermission };

package/src/modules/Forms/atoms.tsx

@@ -1,6 +1,6 @@
-import type { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 
-import type { IModal } from "@ax/types";
+import { IModal } from "@ax/types";
 import { Modal, FieldsBehavior, AsyncSelect } from "@ax/components";
 
 import * as S from "./style";

package/src/modules/FramePreview/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { connect } from "react-redux";
 
 import { BrowserContent, Loading, Toast } from "@ax/components";
@@ -9,9 +8,6 @@ import { getDefaultTheme } from "@ax/helpers";
 import { useOnMessageReceivedFromOutside, useToast, useURLSearchParam } from "@ax/hooks";
 import type { FormContent, ILanguage, IRootState, ISite, ISocialState } from "@ax/types";
 
-import HeadingsOverlay from "./HeadingsOverlay";
-import { observeAndAddIdsToHeadings, observeAndHighlightKeywords } from "./utils";
-
 import * as S from "./style";
 
 const FramePreview = (props: IProps) => {
@@ -33,19 +29,11 @@ const FramePreview = (props: IProps) => {
 		copyModule,
 	} = props;
 
-	const previewParam = useURLSearchParam("preview");
-	const disabledParam = useURLSearchParam("disabled");
+	const isPreview = useURLSearchParam("preview");
+	const isDisabled = useURLSearchParam("disabled");
 	const type = useURLSearchParam("type");
-	const headingFilter = useURLSearchParam("headingFilter");
-	const keywordFilter = useURLSearchParam("keywordFilter");
-
-	const isPreviewMode = previewParam === "true";
-	const isDisabled = disabledParam === "true";
+	document.body.classList.add("preview");
 	const isForm = type === "form";
-	const isHeadingsEditor = type === "headings";
-	const isKeywordsEditor = type === "keywords";
-	const keywords: string[] = pageContent?.metaKeywords || [];
-	const filteredKeywords = keywordFilter ? [keywordFilter] : keywords;
 	const setSelectedContent = isForm ? setSelectedFormContent : setSelectedPageContent;
 	const setContent = isForm ? setFormContent : setEditorContent;
 	const content = isForm ? formContent : pageContent;
@@ -54,40 +42,15 @@ const FramePreview = (props: IProps) => {
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 	useOnMessageReceivedFromOutside(setContent, setSelectedContent);
 
-	useEffect(() => {
-		document.body.classList.add("preview");
-
-		const handleMouseMove = (e: MouseEvent) => {
-			window.parent.postMessage(
-				{
-					type: "iframe-mousemove",
-					clientX: e.clientX,
-				},
-				"*",
-			);
-		};
-
-		window.addEventListener("mousemove", handleMouseMove);
-		return () => window.removeEventListener("mousemove", handleMouseMove);
-	}, []);
-
-	useEffect(() => {
-		if (isDisabled) {
-			localStorage.setItem("selectedID", "0");
-		}
-	}, [isDisabled]);
-
-	useEffect(() => {
-		if (isHeadingsEditor) {
-			return observeAndAddIdsToHeadings(document.body, headingFilter);
-		}
-	}, [isHeadingsEditor, headingFilter]);
-
-	useEffect(() => {
-		if (isKeywordsEditor) {
-			return observeAndHighlightKeywords(document.body, filteredKeywords);
-		}
-	}, [isKeywordsEditor, filteredKeywords]);
+	window.addEventListener("mousemove", (e) => {
+		window.parent.postMessage(
+			{
+				type: "iframe-mousemove",
+				clientX: e.clientX,
+			},
+			"*",
+		);
+	});
 
 	const selectEditorID = (
 		selectedComponent: { editorID: number; component: any; type: string; parentEditorID: number },
@@ -104,7 +67,7 @@ const FramePreview = (props: IProps) => {
 
 		const isNavigationModule = ["header", "footer"].includes(selectedComponent.type);
 
-		if (!isPreviewMode && (!isDisabled || isNavigationModule)) {
+		if (isPreview === "false" && (isDisabled === "false" || isNavigationModule)) {
 			window.parent.postMessage({ type: "module-click", message: editorID }, "*");
 			setSelectedContent?.(editorID);
 		}
@@ -121,7 +84,7 @@ const FramePreview = (props: IProps) => {
 	const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
 	const langs = currentSiteInfo ? siteLangs : globalLangs;
 	const siteID = currentSiteInfo ? currentSiteInfo.id : canonicalSite;
-	const renderer = isForm ? "forms" : isPreviewMode ? "preview" : "editor";
+	const renderer = isForm ? "forms" : isPreview === "true" ? "preview" : "editor";
 
 	const deleteModuleSelected = (editorID: number) => {
 		window.parent.postMessage({ type: "module-delete", message: editorID }, "*");
@@ -149,8 +112,8 @@ const FramePreview = (props: IProps) => {
 	if (isLoading) return <Loading />;
 
 	return (
-		<S.Wrapper>
-			<S.GlobalScrollStyle />
+		// biome-ignore lint/suspicious/noAssignInExpressions: TODO: fix this
+		<S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
 			<BrowserContent
 				cloudinaryName={cloudinaryName}
 				theme={theme}
@@ -168,8 +131,6 @@ const FramePreview = (props: IProps) => {
 				renderer={renderer}
 				selectHoverEditorID={selectHoverEditorID}
 			/>
-			{isHeadingsEditor && <S.Velo />}
-			{isHeadingsEditor && <HeadingsOverlay headingFilter={headingFilter} />}
 			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
 		</S.Wrapper>
 	);

package/src/modules/FramePreview/style.tsx

@@ -1,20 +1,4 @@
-import styled, { createGlobalStyle } from "styled-components";
-
-const GlobalScrollStyle = createGlobalStyle`
-  body.preview {
-    overflow-x: hidden;
-  }
-
-  body.preview::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  body.preview::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: ${(p: any) => p.theme.colors.iconNonActive};
-  }
-`;
+import styled from "styled-components";
 
 const Wrapper = styled.div`
   scroll-behavior: smooth;
@@ -28,22 +12,6 @@ const Wrapper = styled.div`
   body.preview:not(&) {
     min-width: 0 !important;
   }
-
-	.gdd-keyword {
-		background-color: #FFEF9A !important;
-		color: #1C1547 !important;
-		padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
-	}
-`;
-
-const Velo = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  right: 0;
-  background: rgba(255, 255, 255, 0.4);
-  z-index: 1000;
 `;
 
-export { Wrapper, Velo, GlobalScrollStyle };
+export { Wrapper };