@griddo/ax 11.10.12 → 11.10.13-rc.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.12",
+	"version": "11.10.13-rc.1",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9321729f9040a142fa5f3abc6a3b61f743c7f240"
+	"gitHead": "f5bb7e21bd1d985da6ebb2ddb0b21494861c935f"
 }

package/src/api/config.tsx

@@ -1,8 +1,13 @@
+import packageJson from "../../package.json";
+
 const BASE_PATH = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
 
 const headers = {
 	"Content-type": "application/json; charset=UTF-8",
 	accept: "application/json",
+	"x-application-id": "griddo-ax",
+  "x-client-version": packageJson.version,
+  "x-client-name": "AX",
 };
 
 export const template = {

package/src/components/Fields/ArrayFieldGroup/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 import { Button, FieldsDivider } from "@ax/components";
-import { ISite } from "@ax/types";
+import type { ISite } from "@ax/types";
 import { getDefaultSchema } from "@ax/helpers";
 import ArrayFieldItem from "./ArrayFieldItem";
 import ArrayFieldInline from "./ArrayFieldInline";
@@ -28,20 +28,24 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 	const [items, setItems] = useState<any[]>([]);
 	const [isOpen, setIsOpen] = useState<number | null>(null);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: false positive
 	useEffect(() => {
 		const initialValue = value ? Object.values(value) : [];
-		const initialValueMapped = initialValue.map((val: any) => {
+		const initialValueMapped = initialValue.map((val) => {
 			return val.id ? val : { id: uuidv4(), ...val };
 		});
 		setItems(initialValueMapped);
 	}, [editorID]);
 
 	const handleClick = () => {
-		const defaultValues = getDefaultSchema(selectedContent.component);
-		const newComponent =
-			!!defaultValues[objKey] && defaultValues[objKey].length
-				? { ...defaultValues[objKey][0], id: uuidv4() }
-				: { id: uuidv4() };
+		let newComponent = { id: uuidv4() };
+		if(selectedContent){
+			const defaultValues = getDefaultSchema(selectedContent.component);
+			newComponent =
+				!!defaultValues[objKey] && defaultValues[objKey].length
+					? { ...defaultValues[objKey][0], id: uuidv4() }
+					: newComponent;
+		}
 
 		const newItems = [...items, newComponent];
 		setItems(newItems);
@@ -72,40 +76,39 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
 		<div>
 			<DividerComponent />
 			<div>
-				{items &&
-					items.map((item: any, index: number) => {
-						const handleFieldChange = (newValue: Record<string, unknown>) => handleChange(newValue, index);
-						return arrayType === "inline" ? (
-							<ArrayFieldInline
-								key={item.id}
-								fields={innerFields}
-								item={item}
-								index={index}
-								onChange={handleFieldChange}
-								handleDelete={handleDelete}
-								site={site}
-								disabled={disabled}
-								parentKey={objKey}
-								actions={actions}
-							/>
-						) : (
-							<ArrayFieldItem
-								key={item.id}
-								name={name}
-								fields={innerFields}
-								item={item}
-								index={index}
-								onChange={handleFieldChange}
-								handleDelete={handleDelete}
-								isOpen={isOpen}
-								setIsOpen={setIsOpen}
-								site={site}
-								disabled={disabled}
-								parentKey={objKey}
-								actions={actions}
-							/>
-						);
-					})}
+				{items?.map((item, index) => {
+					const handleFieldChange = (newValue: Record<string, unknown>) => handleChange(newValue, index);
+					return arrayType === "inline" ? (
+						<ArrayFieldInline
+							key={item.id}
+							fields={innerFields}
+							item={item}
+							index={index}
+							onChange={handleFieldChange}
+							handleDelete={handleDelete}
+							site={site}
+							disabled={disabled}
+							parentKey={objKey}
+							actions={actions}
+						/>
+					) : (
+						<ArrayFieldItem
+							key={item.id}
+							name={name}
+							fields={innerFields}
+							item={item}
+							index={index}
+							onChange={handleFieldChange}
+							handleDelete={handleDelete}
+							isOpen={isOpen}
+							setIsOpen={setIsOpen}
+							site={site}
+							disabled={disabled}
+							parentKey={objKey}
+							actions={actions}
+						/>
+					);
+				})}
 			</div>
 			<S.ButtonWrapper>
 				<Button type="button" onClick={handleClick} buttonStyle="line" disabled={disabled}>

package/src/components/Fields/CheckField/index.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import { ICheck } from "@ax/types";
 import Icon from "@ax/components/Icon";
+import type { ICheck } from "@ax/types";
 
 import * as S from "./style";
 
@@ -23,12 +22,12 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const isChecked = e.target.checked;
-		onChange && onChange({ value, isChecked });
+		onChange?.({ value, isChecked });
 	};
 
-	const handleMouseOver = () => setHoverCheck && setHoverCheck(true);
+	const handleMouseOver = () => setHoverCheck?.(true);
 
-	const handleMouseLeave = () => setHoverCheck && setHoverCheck(false);
+	const handleMouseLeave = () => setHoverCheck?.(false);
 
 	return (
 		<S.Wrapper className={className}>

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataSource, ILanguage, IRootState, ISchemaField, ISite, IStructuredData } from "@ax/types";
+import type { IDataSource, ILanguage, IRootState, ISchemaField, ISite, IStructuredData } from "@ax/types";
 import {
 	Button,
 	FloatingMenu,
@@ -14,7 +14,8 @@ import {
 	UniqueCheck,
 } from "@ax/components";
 
-import { IReferenceState, IRefField, ISource, useReference } from "../Context";
+import type { IReferenceState, IRefField, ISource } from "../Context";
+import { useReference } from "../Context";
 import AutoItem from "./AutoItem";
 
 import * as S from "./style";
@@ -36,9 +37,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
 	};
 	const [configState, setConfigState] = useState<IConfigState>(initConfig);
 	const initToggle = {
-		isSiteActive: state.site && state.site !== "global" ? true : false,
-		isLangActive: state.lang ? true : false,
-		isGlobalActive: state.site && state.site === "global" ? true : false,
+		isSiteActive: !!(state.site && state.site !== "global" ),
+		isLangActive: !!state.lang,
+		isGlobalActive: !!(state.site && state.site === "global" ),
 		errorSite: false,
 		errorLang: false,
 		errorMsg: "",
@@ -130,8 +131,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
 		title: "",
 		value: state.quantity,
 		onChange: (quantity: number) => setState((state: IReferenceState) => ({ ...state, quantity })),
-		maxValue: validators && validators.maxValue ? validators.maxValue : undefined,
-		minValue: validators && validators.minValue ? validators.minValue : undefined,
+		maxValue: validators?.maxValue ? validators.maxValue : undefined,
+		minValue: validators?.minValue ? validators.minValue : undefined,
 	};
 
 	const checkErrors = (): boolean => {
@@ -258,7 +259,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 	};
 
 	const handleLangChange = (value: string) => {
-		const lang = value.length ? parseInt(value) : undefined;
+		const lang = value.length ? parseInt(value, 10) : undefined;
 		setState((state: IReferenceState) => ({ ...state, lang }));
 		if (value) {
 			setToggleState({ ...toggleState, isLangActive: true, errorLang: false, errorMsg: "" });
@@ -295,7 +296,8 @@ const AutoPanel = (props: IProps): JSX.Element => {
 						state.sources.map((singleSource: ISource) => {
 							const source = state.sourceTitles.find((el: IDataSource) => el.id === singleSource.structuredData);
 							const { filters = [], filterOperator, globalOperator } = singleSource;
-							return source ? (
+							if(!source) return null;
+							return (
 								<AutoItem
 									key={singleSource.structuredData}
 									source={source}
@@ -309,9 +311,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 									globalOperator={globalOperator}
 									siteID={state.site || site?.id}
 								/>
-							) : (
-								<></>
-							);
+							)
 						})}
 				</S.SourcesWrapper>
 				<S.RadioWrapper>
@@ -383,9 +383,9 @@ const AutoPanel = (props: IProps): JSX.Element => {
 											</S.SubConfigContent>
 										</S.ConfigWrapper>
 									</>
-								) : (
-									<></>
-								)}
+								) :
+									null
+								}
 
 								<S.OptionLabel
 									onClick={() => toggleConfig("isDataOpen")}
@@ -483,7 +483,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
 										<UniqueCheck
 											name="preferenceLanguageCheck"
 											options={[
-												{ value: false, name: "preferenceLanguage", title: `${currentLang} content shown first` },
+												{ title: `${currentLang} content shown first` },
 											]}
 											value={state.preferenceLanguage}
 											onChange={handlePreferenceLanguageChange}

package/src/components/Fields/UniqueCheck/index.tsx

@@ -1,8 +1,9 @@
-import React from "react";
 import { CheckField } from "@ax/components";
 
+import * as S from "./style";
+
 const UniqueCheck = (props: IProps) => {
-	const { name, value, options, onChange, disabled, inversed = false, className } = props;
+	const { name, value, options, onChange, disabled, inversed = false, className, description } = props;
 	const uniqueOption = options[0];
 
 	const handleChange = (changeEvt: ICheckEvent) => {
@@ -10,17 +11,22 @@ const UniqueCheck = (props: IProps) => {
 		onChange(isChecked);
 	};
 
+	const classes = description ? "with-subtitle" : "";
+
 	return (
-		<CheckField
-			name={name}
-			checked={!!value && value}
-			title={uniqueOption.title}
-			value={value}
-			onChange={handleChange}
-			disabled={disabled}
-			inversed={inversed}
-			className={className}
-		/>
+		<S.Wrapper className={classes}>
+			<CheckField
+				name={name}
+				checked={!!value}
+				title={uniqueOption.title}
+				value={value}
+				onChange={handleChange}
+				disabled={disabled}
+				inversed={inversed}
+				className={className}
+			/>
+			<S.Subtitle>{description}</S.Subtitle>
+		</S.Wrapper>
 	);
 };
 
@@ -31,17 +37,16 @@ interface ICheckEvent {
 
 interface IProps {
 	name: string;
-	value: any;
+	value: string | number;
 	options: ICheck[];
-	onChange: any;
+	onChange(isChecked: boolean): void;
 	disabled?: boolean;
 	inversed?: boolean;
 	className?: string;
+	description?: string;
 }
 
 interface ICheck {
-	name: string;
-	value: any;
 	title: string;
 }
 

package/src/components/Fields/UniqueCheck/style.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  &.with-subtitle label {
+    ${(p) => p.theme.textStyle.uiL};
+    font-weight: 600;
+  }
+`;
+
+const Subtitle = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  font-weight: 400;
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-left: ${(p) => p.theme.spacing.m};
+`;
+
+export { Wrapper, Subtitle };

package/src/components/FileGallery/GalleryPanel/DetailPanel/index.tsx

@@ -1,9 +1,10 @@
-import React, { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { IRootState, IFile } from "@ax/types";
+
 import { Button, FieldsBehavior, IconAction } from "@ax/components";
-import { formatBytes, getFileIcon, getFormattedDateWithTimezone } from "@ax/helpers";
 import { fileDriveActions } from "@ax/containers/FileDrive";
+import { formatBytes, getFileIcon, getFormattedDateWithTimezone } from "@ax/helpers";
+import type { IFile, IRootState } from "@ax/types";
 
 import * as S from "./style";
 
@@ -14,6 +15,7 @@ const GalleryDetailPanel = (props: IProps) => {
 	const initState: IFormState = { title: title || "", alt: alt || "", tags: tags || [] };
 	const [form, setForm] = useState(initState);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		setForm(initState);
 	}, [selectedFile]);
@@ -105,6 +107,7 @@ const GalleryDetailPanel = (props: IProps) => {
 						fieldType="TagsField"
 						onChange={handleTags}
 						disabled={!isAllowedToEdit}
+						helptext="Type a tag and press enter to create it"
 					/>
 				</S.FormWrapper>
 			</S.PanelForm>

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -1,9 +1,10 @@
-import React, { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { IRootState, IImage, IGetFolderParams } from "@ax/types";
+
 import { Button, FieldsBehavior, IconAction } from "@ax/components";
-import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
 import { galleryActions } from "@ax/containers/Gallery";
+import { formatBytes, getFileExtension, getFormattedDateWithTimezone } from "@ax/helpers";
+import type { IGetFolderParams, IImage, IRootState } from "@ax/types";
 
 import * as S from "./style";
 
@@ -114,6 +115,7 @@ const GalleryDetailPanel = (props: IProps) => {
 						fieldType="TagsField"
 						onChange={handleTags}
 						disabled={!isAllowedToEdit}
+						helptext="Type a tag and press enter to create it"
 					/>
 				</S.FormWrapper>
 			</S.PanelForm>

package/src/components/Tooltip/index.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+
 import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
-const Tooltip = (props: ITooltipProps): JSX.Element => {
+const Tooltip = (props: ITooltipProps) => {
 	const { content, children, hideOnClick = true, bottom, left, expanded, top } = props;
 
 	const initialState: IState = {
@@ -15,26 +17,31 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 	const [state, setState] = useState(initialState);
 	const { active, childrenWidth, clicked, fixOutOfBounds } = state;
 
-	const changeState = (value: any) => {
+	const changeState = useCallback((value: Partial<IState>) => {
 		setState((state) => ({ ...state, ...value }));
-	};
+	}, []);
 
 	const childrenRef = useRef<HTMLDivElement>(null);
 	const tipRef = useRef<HTMLDivElement>(null);
-
-	let timeout: any;
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
 	const showTip = () => {
 		if (!clicked) {
-			timeout = setTimeout(() => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+			timeoutRef.current = setTimeout(() => {
 				changeState({ active: true });
 			}, 1000);
 		}
 	};
 
 	const hideTip = () => {
-		clearInterval(timeout);
-		changeState({ active: false });
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		changeState({ active: false, fixOutOfBounds: 0 });
 	};
 
 	const handleClick = () => {
@@ -44,8 +51,8 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 		}
 	};
 
-	const handleClickOutside = (e: any) => {
-		if (childrenRef.current && childrenRef.current.contains(e.target)) {
+	const handleClickOutside = (e: MouseEvent | TouchEvent) => {
+		if (childrenRef.current?.contains(e.target as Node)) {
 			return;
 		}
 		changeState({ clicked: false });
@@ -53,16 +60,22 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 
 	useHandleClickOutside(clicked, handleClickOutside);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		if (childrenRef.current && childrenRef.current.children[0]) {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+		};
+	}, []);
+
+	useEffect(() => {
+		if (childrenRef.current?.children[0]) {
 			const childrenWidth = childrenRef.current.children[0].clientWidth;
 			changeState({ childrenWidth });
 		}
-	}, [childrenRef]);
+	}, [changeState]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (active && tipRef.current) {
 			const clientRect = tipRef.current.getBoundingClientRect();
 
@@ -72,11 +85,13 @@ const Tooltip = (props: ITooltipProps): JSX.Element => {
 				changeState({ fixOutOfBounds: left });
 			} else if (right > windowSize) {
 				changeState({ fixOutOfBounds: right - windowSize });
+			} else {
+				changeState({ fixOutOfBounds: 0 });
 			}
 		}
-	}, [tipRef, active]);
+	}, [active, changeState]);
 
-	if (!content) return children;
+	if (!content) return <>{children}</>;
 
 	return (
 		<S.Tooltip
@@ -112,8 +127,8 @@ interface IState {
 }
 
 export interface ITooltipProps {
-	content?: string | boolean | JSX.Element[] | JSX.Element;
-	children: any;
+	content?: string | boolean | JSX.Element | JSX.Element[];
+	children: ReactNode;
 	hideOnClick?: boolean;
 	bottom?: boolean;
 	left?: number;

package/src/schemas/pages/GlobalPage.tsx

@@ -151,6 +151,22 @@ export default {
 						},
 					],
 				},
+				{
+					title: "GEO (LLMS)",
+					type: "FieldGroup",
+					key: "geo",
+					collapsed: true,
+					fields: [
+						{
+							type: "UniqueCheck",
+							key: "isLlmsEnabled",
+							options: [
+								{ "title": "Include this page in LLMs.txt" }
+							],
+							description: "If enabled, this page will be listed in LLMs.txt for language models."
+						},
+					],
+				},
 				{
 					title: "Analytics Data Layer",
 					type: "FieldGroup",
@@ -206,5 +222,6 @@ export default {
 		socialTitle: "",
 		socialDescription: "",
 		socialImage: {},
+		isLlmsEnabled: true,
 	},
 };

package/src/schemas/pages/Page.tsx

@@ -217,6 +217,22 @@ export default {
 						},
 					],
 				},
+				{
+					title: "GEO (LLMS)",
+					type: "FieldGroup",
+					key: "geo",
+					collapsed: true,
+					fields: [
+						{
+							type: "UniqueCheck",
+							key: "isLlmsEnabled",
+							options: [
+								{ "title": "Include this page in LLMs.txt" }
+							],
+							description: "If enabled, this page will be listed in LLMs.txt for language models."
+						},
+					],
+				},
 				{
 					title: "Analytics Data Layer",
 					type: "FieldGroup",
@@ -280,5 +296,6 @@ export default {
 		customizeThemes: false,
 		headerTheme: null,
 		footerTheme: null,
+		isLlmsEnabled: true,
 	},
 };