@griddo/ax 11.10.41 → 11.10.42

package/src/components/MainWrapper/AppBar/style.tsx

@@ -184,10 +184,15 @@ const Header = styled.section<{ inversed?: boolean }>`
   }
 `;
 
-const IconWrapper = styled.div<{ inversed?: boolean }>`
+const IconWrapper = styled.div<{ inversed?: boolean; disabled?: boolean }>`
   svg {
     path {
-      fill: ${(p) => (p.inversed ? p.theme.color.textHighEmphasisInverse : p.theme.color.interactive01)};
+      fill: ${({ disabled, theme, inversed }) =>
+				disabled
+					? theme.color.interactiveDisabled
+					: inversed
+						? theme.color.textHighEmphasisInverse
+						: theme.color.interactive01};
     }
   }
 `;
@@ -228,28 +233,28 @@ const ScheduledDate = styled.div<{ inversed?: boolean }>`
 `;
 
 export {
-	ActionMenu,
-	Header,
-	WrapperTabs,
-	Title,
-	Subtitle,
-	ActionText,
 	ActionItem,
+	ActionMenu,
 	ActionMenuTitle,
+	ActionText,
 	ButtonWrapper,
-	IconStatusWrapper,
-	LanguageWrapper,
-	LanguageTextWrapper,
+	ErrorWrapper,
 	FlagWrapper,
-	Separator,
+	Header,
+	HelpText,
+	IconStatusWrapper,
 	IconWrapper,
-	ErrorWrapper,
+	LanguageTextWrapper,
+	LanguageWrapper,
+	ModalContent,
+	ScheduledDate,
 	SearchWrapper,
+	Separator,
+	StatusBtn,
+	Subtitle,
+	TabsContent,
+	Title,
 	WrapperEnd,
+	WrapperTabs,
 	WrapperTitle,
-	TabsContent,
-	StatusBtn,
-	HelpText,
-	ModalContent,
-	ScheduledDate,
 };

package/src/components/MainWrapper/index.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { IErrorItem, ILanguage } from "@ax/types";
-import { useNetworkStatus } from "@ax/hooks";
 import { Notification } from "@ax/components";
+import { useNetworkStatus } from "@ax/hooks";
+import type { IErrorItem, ILanguage } from "@ax/types";
 
 import AppBar from "./AppBar";
 
@@ -63,6 +62,7 @@ export interface IWrapperProps {
 	isDirty?: boolean;
 	exportAction?(formats: (number | string)[]): void;
 	scheduledPublication?: string | null;
+	isSaving?: boolean;
 }
 
 export default MainWrapper;

package/src/components/OcassionalToast/index.tsx

@@ -18,7 +18,7 @@ const OcassionalToast = (props: IOcassionalToastProps): JSX.Element => {
 };
 
 export interface IOcassionalToastProps {
-	message: string;
+	message: string | React.ReactNode;
 	icon?: string;
 }
 

package/src/components/OcassionalToast/style.tsx

@@ -18,6 +18,12 @@ const Wrapper = styled.div`
 const Text = styled.div`
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
+
+  button {
+    ${(p) => p.theme.textStyle.uiM};
+    text-decoration: underline;
+    font-weight: 600;
+  }
 `;
 
 const IconWrapper = styled.div`

package/src/components/PageFinder/SelectionListItem/index.tsx

@@ -1,12 +1,11 @@
-import React from "react";
-import { getFormattedDateWithTimezone } from "@ax/helpers";
 import { CheckField } from "@ax/components";
-import { ICheck, IPage } from "@ax/types";
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+import type { ICheck, IPage } from "@ax/types";
 
 import * as S from "./style";
 
 const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
-	const { option, title, type, date, onClick, pageID, isSelected, onChange, multiple } = props;
+	const { option, title, type, date, onClick, pageID, isSelected, onChange, multiple, slug } = props;
 
 	const handleClick = () => (multiple ? onChange({ value: option, isChecked: !isSelected }) : onClick(option));
 	const handleChange = (value: ICheck) => onChange({ value: option, isChecked: value.isChecked });
@@ -26,6 +25,7 @@ const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
 					<S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
 				</S.Header>
 				<S.Title>{title}</S.Title>
+				<S.Slug>{slug}</S.Slug>
 			</S.Content>
 		</S.ListItem>
 	);
@@ -36,6 +36,7 @@ interface ISelectionListItemProps {
 	title: string;
 	type: string;
 	date: Date;
+	slug: string;
 	onClick: (value: any) => void;
 	pageID: number;
 	isSelected: boolean;

package/src/components/PageFinder/SelectionListItem/style.tsx

@@ -29,6 +29,7 @@ const Type = styled.div`
   color: ${(p) => p.theme.colors.textLowEmphasis};
 `;
 
+// biome-ignore lint/suspicious/noShadowRestrictedNames: conflicts with js Date
 const Date = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.colors.textLowEmphasis};
@@ -43,4 +44,9 @@ const Content = styled.div`
   width: 100%;
 `;
 
-export { ListItem, Title, Header, Type, Date, CheckWrapper, Content };
+const Slug = styled.span`
+  ${({ theme }) => theme.textStyle.uiXS};
+  color: ${({ theme }) => theme.colors.textMediumEmphasis};
+`;
+
+export { CheckWrapper, Content, Date, Header, ListItem, Slug, Title, Type };

package/src/components/PageFinder/index.tsx

@@ -190,6 +190,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 				isSelected={selectedPagesIds.includes(page.id)}
 				onChange={handleChange}
 				multiple={multiple}
+				slug={page.slug.replace(/^\//, "")}
 			/>
 		));
 

package/src/constants/index.ts

@@ -0,0 +1,27 @@
+import type { ValueOf } from "@ax/helpers/types";
+import { LOCALE } from "@ax/locales";
+
+// TODO: localize strings...
+const itemLabel = {
+	COTENT_TYPE: LOCALE.entityLabel.contentType,
+	SIMPLE_CONTENT_TYPE: LOCALE.entityLabel.simpleContentType,
+	PAGE_CONTENT_TYPE: LOCALE.entityLabel.pageContentType,
+	CATEGORY: LOCALE.entityLabel.category,
+	PAGE: LOCALE.entityLabel.page,
+	GLOBAL_PAGE: LOCALE.entityLabel.globalPage,
+	CONTENT: LOCALE.entityLabel.content,
+	ITEM: LOCALE.entityLabel.item,
+	REDIRECT: LOCALE.entityLabel.redirect,
+	ADDON: LOCALE.entityLabel.addon,
+	FILE: LOCALE.entityLabel.file,
+	IMAGE: LOCALE.entityLabel.image,
+	FORM: LOCALE.entityLabel.form,
+	SITE: LOCALE.entityLabel.site,
+	NAVIGATION: LOCALE.entityLabel.navigation,
+	USER: LOCALE.entityLabel.user,
+	ROL: LOCALE.entityLabel.rol,
+} as const;
+
+type ItemLabel = ValueOf<typeof itemLabel>;
+
+export { itemLabel, type ItemLabel };

package/src/forms/elements.tsx

@@ -1,6 +1,6 @@
 import { getDefaultSchema, camelize, isSelectedEditorID, deepClone } from "@ax/helpers";
 import { findByEditorID } from "./editor";
-import { IComponent, IModule } from "@ax/types";
+import type { IComponent, IModule } from "@ax/types";
 
 const updateElementCollection = (elementType: string, prevCollection: any[]) => {
 	const newElement = getDefaultSchema(elementType);
@@ -24,8 +24,9 @@ const updateComponent = (component: any, schema: any) => {
 	}
 };
 
-const updateCollection = (type: string, item: IModule, key: string) =>
-	(item[key] = updateElementCollection(type, item[key]));
+const updateCollection = (type: string, item: IModule, key: string) => {
+	item[key] = updateElementCollection(type, item[key]);
+};
 
 const getUpdatedComponents = (
 	sections: any[],
@@ -115,24 +116,6 @@ const deleteComponent = (elements: any, editorID: number) => {
 	return elements;
 };
 
-function deleteModules(sections: any, editorID: number) {
-	return [...sections].map((section: any) => {
-		section.modules = section.modules.filter((module: any) => {
-			if (module.elements) {
-				module.elements.forEach((element: any) => {
-					return element.componentModules
-						? (element.componentModules = deleteComponent(element.componentModules, editorID))
-						: null;
-				});
-
-				module.elements = deleteComponent(module.elements, editorID);
-			}
-			return module.editorID !== editorID;
-		});
-		return section;
-	});
-}
-
 const setKeyValue = (obj: any, key: string, val: any) => {
 	const [parentKey, childKey] = key.split(".");
 	if (childKey) {
@@ -151,7 +134,9 @@ const updateByEditorID = (content: any, editorID: number, contentKey: string | s
 		if (Array.isArray(contentKey)) {
 			const keys = contentKey;
 			const values = Array.isArray(value) ? value : [value];
-			keys.forEach((k, i) => setKeyValue(content, k, values[i]));
+			keys.forEach((k, i) => {
+				setKeyValue(content, k, values[i]);
+			});
 		} else {
 			setKeyValue(content, contentKey, value);
 		}
@@ -186,7 +171,7 @@ const moveElement = (elementID: number[], arr: any[], newIndex: number, idKey =
 const moveModule = (params: IMoveElementParams) => {
 	const { elementID, content, selectedContent, newIndex, page, key } = params;
 	const isPage = ["Page", "GlobalPage"].includes(selectedContent.component);
-	let newContent;
+	let newContent: any;
 	if (isPage) {
 		const newModules = moveElement(elementID, content[key], newIndex);
 		const { template } = selectedContent;
@@ -252,7 +237,6 @@ export {
 	getUpdatedComponents,
 	getUpdatedSections,
 	updateComponent,
-	deleteModules,
 	updateByEditorID,
 	moveModule,
 	moveElement,

package/src/forms/index.tsx

@@ -18,7 +18,6 @@ import {
 	getUpdatedComponents,
 	getUpdatedSections,
 	updateComponent,
-	deleteModules,
 	updateByEditorID,
 	moveModule,
 	moveElement,
@@ -50,7 +49,6 @@ export {
 	getUpdatedComponents,
 	updateComponent,
 	getUpdatedSections,
-	deleteModules,
 	deleteComponent,
 	replaceElements,
 	updateByEditorID,

package/src/helpers/containerEvaluations.tsx

@@ -53,6 +53,11 @@ const areEqual = (prevProps: any, newProps: any): boolean => {
 		return false;
 	}
 
+	// Re-render si el id de la página cambia (ej: después de guardar)
+	if (prevProps.selectedContent.id !== newProps.selectedContent.id) {
+		return false;
+	}
+
 	const {
 		selectedContent: { type },
 	} = prevProps;

package/src/helpers/content.ts

@@ -0,0 +1,35 @@
+import { type ItemLabel, itemLabel } from "@ax/constants";
+
+/**
+ * Determines the content kind label based on the content type flags.
+ * @param isSimpleContentType - Whether the content is a simple content type
+ * @param isPageContentType - Whether the content is a page content type
+ * @param isStandardPage - Whether the content is a standard page
+ * @returns The corresponding content kind label
+ */
+function getContentItemLabel({
+	isSimpleContentType,
+	isPageContentType,
+	isStandardPage,
+}: {
+	isSimpleContentType: boolean;
+	isPageContentType: boolean;
+	isStandardPage: boolean;
+}) {
+	let contentItem: ItemLabel | null = null;
+
+	if (isSimpleContentType) {
+		contentItem = itemLabel.SIMPLE_CONTENT_TYPE;
+	} else if (isPageContentType) {
+		contentItem = itemLabel.PAGE_CONTENT_TYPE;
+	} else if (isStandardPage) {
+		contentItem = itemLabel.PAGE;
+	} else {
+		// fallback
+		contentItem = itemLabel.ITEM;
+	}
+
+	return contentItem;
+}
+
+export { getContentItemLabel };

package/src/helpers/index.tsx

@@ -81,6 +81,7 @@ import {
 	filterImageText,
 	getFileExtension,
 	getInitials,
+	getSlugFromUrl,
 	isNumber,
 	slugify,
 	splitAndJoin,
@@ -109,113 +110,114 @@ import {
 import { getFormTemplateThumbnailProps, getThumbnailProps } from "./thumbnails";
 
 export {
-	isComponentEmpty,
-	setAsContainedComponent,
 	areAllComponentsEmpty,
-	isEmptyContainer,
-	formatBytes,
-	imageToBase64,
-	getImageFromHtml,
-	getImageFromIFrame,
-	filterImageText,
+	areEqual,
+	areEqualDates,
+	areEquals,
+	arrayInsert,
 	camelize,
-	splitCamelCase,
-	isEmptyObj,
+	capitalize,
+	compressImage,
+	copyTextToClipboard,
+	dateToString,
+	decodeEntities,
 	deepClone,
-	isSelectedEditorID,
-	resetMultipleValues,
-	getNullValue,
-	removeEditorIds,
-	trimObject,
-	hasProps,
+	delay,
+	encodeData,
+	filterByCategory,
 	filterDuplicatedValues,
-	areEquals,
-	removeMenuEditorIds,
-	sortBy,
-	getSchema,
+	filterImageText,
+	filterThemeDatapacks,
+	filterThemeModules,
+	filterThemeTemplates,
+	findObjectValue,
+	formatBytes,
+	getActivatedDataPacksIds,
+	getCurrentPageStructuredData,
+	getDataPackSchema,
+	getDateRange,
+	getDaysAgo,
+	getDeactivatedModules,
+	getDefaultFormTemplate,
+	getDefaultNavigationModules,
 	getDefaultSchema,
-	getTemplate,
 	getDefaultTemplate,
+	getDefaultTheme,
 	getDisplayName,
-	getTemplateType,
-	getTemplateDisplayName,
-	getSchemaThumbnails,
-	getTemplateThumbnails,
-	getMenuItems,
-	filterByCategory,
-	getStructuredDataFromPage,
-	getCurrentPageStructuredData,
-	getThumbnailProps,
-	getFormTemplateThumbnailProps,
-	slugify,
 	getFieldByPath,
-	isReqOk,
-	dateToString,
-	stringToDate,
-	isValidDate,
-	isValidDateRange,
-	getDateRange,
-	areEqualDates,
-	getStringifyDateRange,
-	getHumanLastModifiedDate,
+	getFileExtension,
+	getFileIcon,
 	getFormattedDateWithTimezone,
-	getDaysAgo,
-	getRange,
-	getScheduleFormatDate,
-	imageResizeCropAndCompress,
-	compressImage,
-	validateEmail,
-	capitalize,
-	isEmptyArray,
-	handleRequest,
-	getActivatedDataPacksIds,
-	isModuleDisabled,
-	getDeactivatedModules,
+	getFormTemplate,
+	getFormTemplateCategories,
+	getFormTemplates,
+	getFormTemplateThumbnailProps,
+	getFormTemplateThumbnails,
+	getGlobalPageTypes,
+	getHumanLastModifiedDate,
+	getImageFromHtml,
+	getImageFromIFrame,
 	getInitials,
-	getSchemaType,
+	getMaxColumns,
+	getMenuItems,
 	getModuleCategories,
 	getModuleStyles,
-	trimText,
-	decodeEntities,
+	getNavigationModules,
+	getNewBreadcrumb,
+	getNullValue,
+	getRange,
+	getScheduleFormatDate,
+	getSchema,
+	getSchemaFormCategories,
+	getSchemaThumbnails,
+	getSchemaType,
+	getSlugFromUrl,
+	getStringifyDateRange,
+	getStructuredDataFromPage,
 	getStructuredDataTitle,
-	isStructuredDataFromPage,
+	getTemplate,
+	getTemplateDisplayName,
+	getTemplateThumbnails,
+	getTemplateType,
+	getThemeElements,
+	getThumbnailProps,
+	handleRequest,
+	hasProps,
+	imageResizeCropAndCompress,
+	imageToBase64,
+	isComponentEmpty,
+	isDevelopment,
+	isEmptyArray,
+	isEmptyContainer,
+	isEmptyObj,
 	isGlobalStructuredData,
-	getGlobalPageTypes,
+	isModuleDisabled,
+	isMultipleNavigationModules,
 	isNumber,
-	getFileExtension,
+	isReqOk,
+	isSelectedEditorID,
+	isStructuredDataFromPage,
+	isTemplateExcludedFromTheme,
+	isValidDate,
+	isValidDateRange,
 	moveArrayElement,
-	isDevelopment,
-	getDataPackSchema,
+	parseTheme,
+	protectFormKeys,
+	removeDuplicatesByProperty,
+	removeEditorIds,
+	removeMenuEditorIds,
+	resetMultipleValues,
+	setAsContainedComponent,
+	slugify,
+	sortBy,
 	splitAndJoin,
 	splitAndTrim,
-	getDefaultTheme,
-	getThemeElements,
-	filterThemeModules,
-	filterThemeTemplates,
-	filterThemeDatapacks,
-	isTemplateExcludedFromTheme,
-	copyTextToClipboard,
-	getNavigationModules,
-	getDefaultNavigationModules,
-	isMultipleNavigationModules,
-	getFormTemplate,
-	getDefaultFormTemplate,
-	getFormTemplates,
-	getFormTemplateThumbnails,
-	getSchemaFormCategories,
-	getFormTemplateCategories,
-	areEqual,
-	parseTheme,
+	splitCamelCase,
+	stringToDate,
 	stripHtml,
-	encodeData,
-	getFileIcon,
-	getNewBreadcrumb,
-	updatePropertyById,
-	arrayInsert,
-	getMaxColumns,
+	trimObject,
+	trimText,
 	updateColumns,
-	findObjectValue,
-	removeDuplicatesByProperty,
-	delay,
-	protectFormKeys,
+	updatePropertyById,
+	validateEmail,
 };

package/src/helpers/strings.tsx

@@ -129,6 +129,24 @@ const stripHtml = (html: string | null) => {
 	return tmp.textContent || tmp.innerText || "";
 };
 
+/**
+ * Obtiene el último segmento (slug) de una URL,
+ * ignorando slashes finales o parámetros de búsqueda.
+ */
+const getSlugFromUrl = (urlText?: string): string | undefined => {
+	if (!urlText) return "";
+
+	try {
+		const url = new URL(urlText);
+		// pathname devuelve algo como "/hisco-mk-i/en/slug-final/"
+		const segments = url.pathname.split("/").filter(Boolean);
+		return segments.pop();
+	} catch (error) {
+		console.error("URL no válida", error);
+		return undefined;
+	}
+};
+
 export {
 	filterImageText,
 	splitCamelCase,
@@ -145,4 +163,5 @@ export {
 	splitAndTrim,
 	copyTextToClipboard,
 	stripHtml,
+	getSlugFromUrl,
 };

package/src/helpers/types.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/src/hooks/forms.tsx

@@ -50,8 +50,9 @@ const usePrevious = (value: Record<string, unknown> | string, isSaved?: boolean)
 	const isSavedData = getIsSavedData();
 
 	useEffect(() => {
+		const currentValue = valueStr && JSON.parse(valueStr);
 		if (!ref.current || isEmptyObj(ref.current)) {
-			ref.current = valueStr && JSON.parse(valueStr);
+			ref.current = currentValue;
 		}
 	}, [valueStr]);
 

package/src/locales/en-US.ts

@@ -16,6 +16,16 @@ export const enUS = {
 		noResults: "No results found",
 		copyUrl: "Copy URL",
 		filterByPageType: "Filter by page type",
+		publishing: "publishing",
+		unpublishing: "unpublishing",
+		deleting: "deleting",
+		processing: "processing",
+		pages: "pages",
+		pleaseWait: "please wait",
+		downloading: "downloading",
+		moving: "moving",
+		deactivating: "deactivating",
+		activating: "activating",
 	},
 	fields: {
 		tags: {
@@ -45,4 +55,23 @@ export const enUS = {
 		network: "Network error. Please check your connection.",
 		unauthorized: "You are not authorized to perform this action.",
 	},
+	entityLabel: {
+		contentType: { one: "content type", other: "content types" },
+		simpleContentType: { one: "simple content type", other: "simple content types" },
+		pageContentType: { one: "page content type", other: "page content types" },
+		category: { one: "category", other: "categories" },
+		page: { one: "page", other: "pages" },
+		globalPage: { one: "global page", other: "global pages" },
+		content: { one: "content", other: "contents" },
+		item: { one: "item", other: "items" },
+		form: { one: "form", other: "forms" },
+		image: { one: "image", other: "images" },
+		redirect: { one: "redirect", other: "redirects" },
+		addon: { one: "addon", other: "addons" },
+		file: { one: "file", other: "files" },
+		site: { one: "site", other: "sites" },
+		navigation: { one: "navigation", other: "navigations" },
+		user: { one: "user", other: "users" },
+		rol: { one: "rol", other: "roles" },
+	},
 } as const;

package/src/locales/es-ES.ts

@@ -16,6 +16,16 @@ export const esES = {
 		noResults: "No se encontraron resultados",
 		copyUrl: "Copiar URL",
 		filterByPageType: "Filtrar por tipo de página",
+		publishing: "publicando",
+		unpublishing: "despublicando",
+		deleting: "eliminando",
+		processing: "procesando",
+		pages: "páginas",
+		pleaseWait: "por favor, espere",
+		downloading: "descargando",
+		moving: "moviendo",
+		deactivating: "desactivando",
+		activating: "activando",
 	},
 	fields: {
 		tags: {
@@ -45,4 +55,23 @@ export const esES = {
 		network: "Error de red. Por favor, verifique su conexión.",
 		unauthorized: "No está autorizado para realizar esta acción.",
 	},
+	entityLabel: {
+		contentType: { one: "tipo de contenido", other: "tipo de contenidos" },
+		simpleContentType: { one: "tipo de contenido simple", other: "tipos de contenido simple" },
+		pageContentType: { one: "tipo de contenido de página", other: "tipos de contenido de página" },
+		category: { one: "categoría", other: "categorías" },
+		page: { one: "página", other: "páginas" },
+		globalPage: { one: "página global", other: "páginas globales" },
+		content: { one: "contenido", other: "contenidos" },
+		item: { one: "elemento", other: "elementos" },
+		form: { one: "formulario", other: "formularios" },
+		image: { one: "imagen", other: "imágenes" },
+		redirect: { one: "redirección", other: "redirecciones" },
+		addon: { one: "addon", other: "addons" },
+		file: { one: "archivo", other: "archivos" },
+		site: { one: "web", other: "webs" },
+		navigation: { one: "navegacion", other: "navegaciones" },
+		user: { one: "usuario", other: "usuarios" },
+		rol: { one: "rol", other: "roles" },
+	},
 } as const;