@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/components/HeadingsPreviewModal/HeadingItem/index.tsx

@@ -0,0 +1,71 @@
+import { Icon } from "@ax/components";
+import type { HeadingNode } from "@ax/types";
+
+import * as S from "./style";
+
+const HeadingItem = ({
+	head,
+	index,
+	isFiltering,
+	selected,
+	onHeadingClick,
+	counter,
+	parentPath,
+}: IHeadingItemProps) => {
+	counter.value += 1;
+	const headingId = counter.value;
+	const uniqueKey = `${parentPath}${head.tag}-${head.level}-${index}-${head.text.slice(0, 20)}`;
+
+	return (
+		<>
+			<S.HeadItem
+				level={isFiltering ? 1 : head.level}
+				tag={head.tag}
+				tabIndex={0}
+				role="button"
+				onClick={onHeadingClick(headingId)}
+				isSelected={selected === headingId}
+				isHidden={head.isHidden}
+				data-heading-id={headingId}
+			>
+				<S.HeadTag>
+					<div>{head.tag}</div>
+				</S.HeadTag>
+				<S.StyledTooltip content={head.isHidden ? "Hidden with CSS" : null}>
+					<S.HeadText>
+						<div>{head.text}</div>
+						{head.isHidden && (
+							<S.HiddenIcon>
+								<Icon name="hide" size="16" />
+							</S.HiddenIcon>
+						)}
+					</S.HeadText>
+				</S.StyledTooltip>
+			</S.HeadItem>
+			{head.children.map((child, childIndex) => (
+				<HeadingItem
+					key={`${uniqueKey}-child-${childIndex}`}
+					head={child}
+					index={childIndex}
+					isFiltering={isFiltering}
+					selected={selected}
+					onHeadingClick={onHeadingClick}
+					counter={counter}
+					parentPath={`${uniqueKey}-`}
+				/>
+			))}
+		</>
+	);
+};
+
+interface IHeadingItemProps {
+	head: HeadingNode;
+	index: number;
+	isFiltering: boolean;
+	selected: number | null;
+	onHeadingClick: (id: number) => () => void;
+	counter: { value: number };
+	parentPath: string;
+}
+
+export default HeadingItem;

package/src/components/HeadingsPreviewModal/HeadingItem/style.tsx

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+
+import Tooltip from "../../Tooltip";
+
+import { getHeadColor } from "../utils";
+
+const HeadTag = styled.div`
+  display: flex;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
+  align-items: center;
+  div {
+    transform: rotate(-90deg);
+  }
+`;
+
+const HeadText = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
+  width: 100%;
+`;
+
+const HeadItem = styled.div<{ level: number; tag: string; isSelected: boolean; isHidden: boolean }>`
+  position: relative;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  display: flex;
+  margin-left: ${(p) => `${(p.level - 1) * 16}px`};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  min-height: 40px;
+  border: ${(p) => `1px solid ${getHeadColor(p.tag)}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  cursor: pointer;
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  outline: ${(p) => (p.isSelected ? `1px solid ${p.theme.colors.interactive01}` : "none")};
+
+  &:before {
+    content: "";
+    border-radius: ${(p) => p.theme.radii.s};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+
+  &:hover:before {
+    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
+    opacity: 1;
+  }
+
+  ${HeadTag} {
+    background-color: ${(p) => getHeadColor(p.tag)};
+  }
+
+  ${HeadText} {
+    color: ${(p) => (p.isHidden ? p.theme.colors.interactiveDisabled : p.theme.colors.textHighEmphasis)};
+  }
+`;
+
+const HiddenIcon = styled.div`
+  margin-left: auto;
+  svg path {
+    fill: ${(p) => p.theme.colors.interactiveDisabled};
+  }
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  width: 100%;
+`;
+
+export { HeadItem, HeadTag, HeadText, HiddenIcon, StyledTooltip };

package/src/components/HeadingsPreviewModal/index.tsx

@@ -0,0 +1,148 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { EmptyState, FloatingPanel } from "@ax/components";
+import type { HeadingFilter, HeadingNode } from "@ax/types";
+
+import ErrorsBanner from "./ErrorsBanner";
+import HeadingItem from "./HeadingItem";
+import { analyzeHeadings, extractUniqueHeadingTypes, filterHeadings, parseHeadingsTree } from "./utils";
+
+import * as S from "./style";
+
+const HeadingsPreviewModal = (props: IHeadingsPreviewProps) => {
+	const { isOpen, browserRef, headingsFilter, setHeadingsFilter, toggleModal } = props;
+
+	const isFiltering = headingsFilter !== "all";
+	const counter = { value: 0 };
+
+	const [headings, setHeadings] = useState<HeadingNode[]>([]);
+	const [selected, setSelected] = useState<number | null>(null);
+	const [isErrorsBannerOpen, setIsErrorsBannerOpen] = useState(false);
+	const [errorsResetKey, setErrorsResetKey] = useState(0);
+	const listRef = useRef<HTMLDivElement>(null);
+
+	const filters = useMemo<HeadingFilter[]>(() => ["all", ...extractUniqueHeadingTypes(headings)], [headings]);
+	const filteredHeadings = useMemo(() => filterHeadings(headings, headingsFilter), [headings, headingsFilter]);
+	const errors = useMemo(() => analyzeHeadings(filteredHeadings, isFiltering), [filteredHeadings, isFiltering]);
+
+	const getSEOHeadings = useCallback(() => {
+		return browserRef.current ? parseHeadingsTree(browserRef.current) : [];
+	}, [browserRef]);
+
+	useEffect(() => {
+		if (isOpen) {
+			const headings = getSEOHeadings();
+			setHeadings(headings);
+		} else {
+			setHeadingsFilter("all");
+		}
+	}, [isOpen, getSEOHeadings, setHeadingsFilter]);
+
+	const closeErrorsBanner = () => {
+		setIsErrorsBannerOpen(false);
+		setErrorsResetKey((k) => k + 1);
+	};
+
+	const handleFilterClick = (value: HeadingFilter) => () => {
+		setSelected(null);
+		setHeadingsFilter(value);
+		closeErrorsBanner();
+	};
+
+	const scrollToHeadingInIframe = (id: number) => {
+		const iframe = browserRef.current?.querySelector("iframe");
+		const iframeDocument = iframe?.contentDocument || iframe?.contentWindow?.document;
+		const heading = iframeDocument?.querySelector(`[data-griddoid="heading-${id}"]`);
+		heading?.scrollIntoView({ behavior: "smooth", block: "center" });
+	};
+
+	const handleHeadingClick = (id: number) => () => {
+		if (id !== selected) {
+			setSelected(id);
+			scrollToHeadingInIframe(id);
+		} else {
+			setSelected(null);
+		}
+		closeErrorsBanner();
+	};
+
+	const handleHeadingNavigate = (id: number) => () => {
+		setSelected(id);
+		scrollToHeadingInIframe(id);
+
+		const listItem = listRef.current?.querySelector(`[data-heading-id="${id}"]`);
+		listItem?.scrollIntoView({ behavior: "smooth", block: "center" });
+	};
+
+	return (
+		<S.Wrapper>
+			<FloatingPanel title="Headings" toggleModal={toggleModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
+				{isOpen &&
+					(!filteredHeadings.length ? (
+						<S.EmptyWrapper>
+							<EmptyState
+								message={
+									<>
+										There are no headings available to display.
+										<br />
+										Feel free to add some to get started!
+									</>
+								}
+							/>
+						</S.EmptyWrapper>
+					) : (
+						<S.HeadingsWrapper>
+							{errors.length > 0 && (
+								<ErrorsBanner
+									errors={errors}
+									onSelectHeading={handleHeadingNavigate}
+									isOpen={isErrorsBannerOpen}
+									setIsOpen={setIsErrorsBannerOpen}
+									resetKey={errorsResetKey}
+								/>
+							)}
+							<S.FiltersWrapper>
+								<S.FilterText>Show headings:</S.FilterText>
+								{filters.map((type) => (
+									<S.FilterItem
+										key={type}
+										type="button"
+										tabIndex={0}
+										isSelected={headingsFilter === type}
+										onClick={handleFilterClick(type)}
+										tag={type}
+									>
+										{type}
+									</S.FilterItem>
+								))}
+							</S.FiltersWrapper>
+							<S.HeadingsListWrapper ref={listRef}>
+								{filteredHeadings.map((head, index) => (
+									<HeadingItem
+										key={`${head.tag}-${head.level}-${index}-${head.text.slice(0, 20)}`}
+										head={head}
+										index={index}
+										isFiltering={isFiltering}
+										selected={selected}
+										onHeadingClick={handleHeadingClick}
+										counter={counter}
+										parentPath=""
+									/>
+								))}
+							</S.HeadingsListWrapper>
+						</S.HeadingsWrapper>
+					))}
+			</FloatingPanel>
+		</S.Wrapper>
+	);
+};
+
+interface IHeadingsPreviewProps {
+	isOpen: boolean;
+	browserRef: React.RefObject<HTMLDivElement>;
+	toggleModal: () => void;
+	headingsFilter: HeadingFilter;
+	setHeadingsFilter: (value: HeadingFilter) => void;
+}
+
+export default HeadingsPreviewModal;

package/src/components/HeadingsPreviewModal/style.tsx

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+
+import { getHeadColor } from "./utils";
+
+const Wrapper = styled.div``;
+
+const HeadingsWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 80px ${p.theme.spacing.s}`};
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 100%;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
+`;
+
+const FiltersWrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.colors.uiBackground03};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  gap: ${(p) => p.theme.spacing.xs};
+  overflow-x: auto;
+  width: 100%;
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.color.iconNonActive};
+  }
+`;
+
+const FilterText = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  flex-shrink: 0;
+`;
+
+const FilterItem = styled.button<{ isSelected: boolean; tag: string }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => (p.isSelected ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
+  text-transform: uppercase;
+  border-radius: ${(p) => p.theme.radii.xs};
+  background-color: ${(p) => getHeadColor(p.tag, !p.isSelected ? 0.5 : undefined)};
+  padding: ${(p) => `0 ${p.theme.spacing.xs}`};
+  outline: ${(p) => (p.isSelected ? `1px solid ${p.theme.colors.interactive01}` : "none")};
+  font-weight: ${(p) => (p.isSelected ? "700" : "500")};
+  flex-shrink: 0;
+`;
+
+const HeadingsListWrapper = styled.div``;
+
+const EmptyWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+export {
+	Wrapper,
+	HeadingsWrapper,
+	FiltersWrapper,
+	FilterText,
+	FilterItem,
+	HeadingsListWrapper,
+	EmptyWrapper,
+};

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -0,0 +1,329 @@
+import type { HeadingFilter, HeadingLevel, HeadingNode } from "@ax/types";
+
+const MAX_HEADING_LENGTH = 70;
+
+const headColorsRGB: Record<string, { r: number; g: number; b: number }> = {
+	h1: { r: 255, g: 240, b: 109 },
+	h2: { r: 255, g: 184, b: 248 },
+	h3: { r: 115, g: 248, b: 200 },
+	h4: { r: 155, g: 237, b: 255 },
+	h5: { r: 198, g: 193, b: 255 },
+	h6: { r: 255, g: 206, b: 149 },
+};
+
+const getHeadColor = (tag: string, opacity?: number): string => {
+	const color = headColorsRGB[tag];
+	if (!color) return "rgb(255, 255, 255)";
+	if (opacity !== undefined) {
+		return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`;
+	}
+	return `rgb(${color.r}, ${color.g}, ${color.b})`;
+};
+
+const flattenHeadings = (headings: HeadingNode[], counter = { value: 0 }): IFlatHeading[] => {
+	const result: IFlatHeading[] = [];
+
+	for (const heading of headings) {
+		counter.value += 1;
+		result.push({
+			id: counter.value,
+			level: heading.level,
+			tag: heading.tag,
+			text: heading.text,
+			isHidden: heading.isHidden,
+		});
+
+		if (heading.children.length > 0) {
+			result.push(...flattenHeadings(heading.children, counter));
+		}
+	}
+
+	return result;
+};
+
+const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeadingError[] => {
+	const errors: IHeadingError[] = [];
+	const flatHeadings = flattenHeadings(headings);
+
+	if (flatHeadings.length === 0) {
+		return errors;
+	}
+
+	// 1. Check for missing H1
+	const hasH1 = flatHeadings.some((h) => h.tag === "h1");
+	if (!isFiltering && !hasH1) {
+		errors.push({
+			message: "No H1 in this page",
+			description: (
+				<>
+					Add a H1 tag to improve page
+					<br />
+					structure and SEO visibility.
+				</>
+			),
+			headingIds: [],
+		});
+	}
+
+	// 2. Check for incorrect nesting (skipped levels)
+	const nestingErrorIds: number[] = [];
+	for (let i = 1; i < flatHeadings.length; i++) {
+		const prevLevel = flatHeadings[i - 1].level;
+		const currLevel = flatHeadings[i].level;
+
+		if (currLevel > prevLevel && currLevel - prevLevel > 1) {
+			nestingErrorIds.push(flatHeadings[i].id);
+		}
+	}
+	if (nestingErrorIds.length > 0) {
+		errors.push({
+			message: "Check heading structure for SEO compliance",
+			description: (
+				<>
+					Ensure each heading is properly nested
+					<br />
+					and follows SEO best practices.
+				</>
+			),
+			headingIds: nestingErrorIds,
+		});
+	}
+
+	// 3. Check for duplicate texts
+	const textMap = new Map<string, number[]>();
+	const visibleHeadings = flatHeadings.filter((h) => !h.isHidden);
+	for (const heading of visibleHeadings) {
+		const normalizedText = heading.text.toLowerCase().trim();
+		if (normalizedText) {
+			const ids = textMap.get(normalizedText) || [];
+			ids.push(heading.id);
+			textMap.set(normalizedText, ids);
+		}
+	}
+	const duplicateIds: number[] = [];
+	for (const ids of textMap.values()) {
+		if (ids.length > 1) {
+			duplicateIds.push(...ids);
+		}
+	}
+	if (duplicateIds.length > 0) {
+		errors.push({
+			message: "Avoid header repetitions for SEO",
+			description: (
+				<>
+					Diversify your headings to enhance SEO.
+					<br />
+					Avoid using the same heading multiple times.
+				</>
+			),
+			headingIds: duplicateIds,
+		});
+	}
+
+	// 4. Check for excessive length
+	const excessiveLengthIds: number[] = [];
+	for (const heading of flatHeadings) {
+		if (heading.text.length > MAX_HEADING_LENGTH) {
+			excessiveLengthIds.push(heading.id);
+		}
+	}
+	if (excessiveLengthIds.length > 0) {
+		errors.push({
+			message: "Some headings are too long",
+			description: (
+				<>
+					Optimize SEO by shortening
+					<br />
+					headings to ensure clarity.
+				</>
+			),
+			headingIds: excessiveLengthIds,
+		});
+	}
+
+	return errors;
+};
+
+const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
+	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
+	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+
+	if (!frameContent) {
+		return [];
+	}
+
+	const iframeWindow = frameObject?.contentWindow;
+	const headings = Array.from(frameContent.querySelectorAll("h1, h2, h3, h4, h5, h6")) as HTMLHeadingElement[];
+
+	const root: HeadingNode[] = [];
+	const stack: HeadingNode[] = [];
+
+	const isElementHidden = (el: HTMLElement): boolean => {
+		if (!iframeWindow) return false;
+
+		const style = iframeWindow.getComputedStyle(el);
+
+		// 1. Check CSS properties directly on element
+		if (style.display === "none" || style.visibility === "hidden" || parseFloat(style.opacity) === 0) {
+			return true;
+		}
+
+		// 2. Check for hidden attribute
+		if (el.hidden) {
+			return true;
+		}
+
+		// 3. Check dimensions (width or height is 0)
+		const rect = el.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) {
+			return true;
+		}
+
+		// 4. Check if completely out of viewport
+		const frameRect = frameObject?.getBoundingClientRect();
+		if (frameRect) {
+			if (
+				rect.bottom < frameRect.top ||
+				rect.top > frameRect.bottom ||
+				rect.right < frameRect.left ||
+				rect.left > frameRect.right
+			) {
+				return true;
+			}
+		}
+
+		// 5. Check if element is covered by another element (elementFromPoint)
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + rect.height / 2;
+		if (frameObject && centerX >= 0 && centerY >= 0 && centerX <= window.innerWidth && centerY <= window.innerHeight) {
+			const topElement = document.elementFromPoint(centerX, centerY);
+			if (topElement && topElement !== el && !el.contains(topElement)) {
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const isAncestorHidden = (el: HTMLElement): boolean => {
+		let node: HTMLElement | null = el.parentElement;
+		while (node && node !== frameContent) {
+			if (iframeWindow) {
+				const style = iframeWindow.getComputedStyle(node);
+
+				// Check for display:none or visibility:hidden in ancestor
+				if (style.display === "none" || style.visibility === "hidden") {
+					return true;
+				}
+
+				// Check for opacity:0 with animation check
+				if (parseFloat(style.opacity) === 0) {
+					const hasAnimation = style.animationName !== "none";
+					const transitionProps = style.transitionProperty.split(",").map((p) => p.trim());
+					const hasOpacityTransition = transitionProps.includes("opacity") || transitionProps.includes("all");
+					if (!hasAnimation && !hasOpacityTransition) return true;
+
+					// If opacity is 0 and element is outside document flow or can't receive events,
+					// it's effectively hidden regardless of transition state
+					if (style.pointerEvents === "none" || (node as HTMLElement).offsetParent === null) {
+						return true;
+					}
+				}
+
+				// Check if ancestor is in collapsed navigation
+				const navSelector = "nav, header, [role='navigation'], .nav, .menu, .navbar, .sidebar";
+				if (node.matches(navSelector)) {
+					const ancestorRect = node.getBoundingClientRect();
+					const nodeHeight = parseFloat(style.height);
+					const nodeMaxHeight = parseFloat(style.maxHeight);
+
+					if (
+						(nodeHeight === 0 || nodeMaxHeight === 0 || style.overflow === "hidden") &&
+						(ancestorRect.height === 0 || ancestorRect.height < 10)
+					) {
+						return true;
+					}
+				}
+			}
+			node = node.parentElement;
+		}
+		return false;
+	};
+
+	for (const heading of headings) {
+		const level = Number(heading.tagName[1]) as HeadingLevel;
+		const isFixedPosition = iframeWindow?.getComputedStyle(heading).position === "fixed";
+		const isHidden =
+			isElementHidden(heading) || (heading.offsetParent === null && !isFixedPosition) || isAncestorHidden(heading);
+
+		const node: HeadingNode = {
+			level,
+			tag: heading.tagName.toLowerCase() as HeadingNode["tag"],
+			text: heading.textContent?.trim() ?? "",
+			isHidden: !!isHidden,
+			children: [],
+		};
+
+		// Subir en la jerarquía si el nivel actual es menor o igual
+		while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+			stack.pop();
+		}
+
+		if (stack.length === 0) {
+			root.push(node);
+		} else {
+			stack[stack.length - 1].children.push(node);
+		}
+
+		stack.push(node);
+	}
+
+	return root;
+};
+
+const extractUniqueHeadingTypes = (headings: HeadingNode[]): HeadingFilter[] => {
+	const types = new Set<HeadingFilter>();
+
+	const traverse = (nodes: HeadingNode[]) => {
+		for (const node of nodes) {
+			types.add(node.tag);
+			if (node.children && node.children.length > 0) {
+				traverse(node.children);
+			}
+		}
+	};
+
+	traverse(headings);
+	return Array.from(types).sort();
+};
+
+const filterHeadings = (headings: HeadingNode[], selectedType: string): HeadingNode[] => {
+	if (selectedType === "all") return headings;
+
+	return flattenHeadings(headings)
+		.filter((h) => h.tag === selectedType)
+		.map((h) => ({
+			level: h.level,
+			tag: h.tag,
+			text: h.text,
+			isHidden: h.isHidden,
+			children: [],
+		}));
+};
+
+interface IHeadingError {
+	message: string;
+	description: React.ReactNode;
+	headingIds: number[];
+}
+
+interface IFlatHeading {
+	id: number;
+	level: HeadingLevel;
+	tag: HeadingNode["tag"];
+	text: string;
+	isHidden: boolean;
+}
+
+export { parseHeadingsTree, extractUniqueHeadingTypes, filterHeadings, analyzeHeadings, getHeadColor };
+export type { IHeadingError };