@griddo/ax 11.11.7 → 11.11.8-rc.0

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,146 @@
+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);
+		}
+	}, [isOpen, getSEOHeadings]);
+
+	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,257 @@
+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[]>();
+	for (const heading of flatHeadings) {
+		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 hasOpacityZeroAncestor = (el: HTMLElement): boolean => {
+		let node: HTMLElement | null = el.parentElement;
+		while (node && node !== frameContent) {
+			if (iframeWindow) {
+				const style = iframeWindow.getComputedStyle(node);
+				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;
+				}
+			}
+			node = node.parentElement;
+		}
+		return false;
+	};
+
+	for (const heading of headings) {
+		const level = Number(heading.tagName[1]) as HeadingLevel;
+		const style = iframeWindow?.getComputedStyle(heading);
+		const isFixedPosition = style?.position === "fixed";
+		const isHidden =
+			heading.hidden ||
+			(heading.offsetParent === null && !isFixedPosition) ||
+			style?.visibility === "hidden" ||
+			hasOpacityZeroAncestor(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 };

package/src/components/IconAction/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
@@ -20,6 +19,7 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
 			size={size}
 			inversed={inversed}
 			active={active}
+			tabIndex={0}
 		>
 			<S.Icon data-testid={`icon-action-${icon}`}>
 				<Icon name={icon} />

package/src/components/KeywordsPreviewModal/KeywordItem/index.tsx

@@ -0,0 +1,46 @@
+import { IconAction } from "@ax/components";
+import { useModal } from "@ax/hooks";
+
+import { DeleteKeywordsModal } from "../atoms";
+
+import * as S from "./style";
+
+const KeywordItem = (props: IKeywordItemProps) => {
+	const { keyword, count, isSelected, onClick, deleteKeyword } = props;
+
+	const { isOpen, toggleModal } = useModal();
+
+	const handleDeleteKeyword = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		if (count > 0) {
+			toggleModal();
+		} else {
+			deleteKeyword(keyword);
+		}
+	};
+
+	return (
+		<>
+			<S.KeywordItem tabIndex={0} role="button" onClick={onClick} isSelected={isSelected}>
+				<S.KeyName>{keyword}</S.KeyName>
+				<S.ActionsWrapper>
+					<S.Counter isZero={!count}>{count} used</S.Counter>
+					<S.IconWrapper>
+						<IconAction icon="delete" size="s" onClick={handleDeleteKeyword} />
+					</S.IconWrapper>
+				</S.ActionsWrapper>
+			</S.KeywordItem>
+			<DeleteKeywordsModal isOpen={isOpen} toggleModal={toggleModal} deleteKeyword={() => deleteKeyword(keyword)} />
+		</>
+	);
+};
+
+interface IKeywordItemProps {
+	keyword: string;
+	count: number;
+	isSelected: boolean;
+	onClick: () => void;
+	deleteKeyword: (keyword: string) => void;
+}
+
+export default KeywordItem;

package/src/components/KeywordsPreviewModal/KeywordItem/style.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+const IconWrapper = styled.div`
+  margin-left: ${(p) => p.theme.spacing.xs};
+  opacity: 0;
+`;
+
+const KeywordItem = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  min-height: ${(p) => p.theme.spacing.l};
+  border-radius: ${(p) => p.theme.radii.s};
+  cursor: pointer;
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  padding-left: ${(p) => p.theme.spacing.s};
+  padding-right: ${(p) => p.theme.spacing.xs};
+  align-items: center;
+  justify-content: space-between;
+  outline: ${(p) => (p.isSelected ? `2px 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 {
+    ${IconWrapper} {
+      opacity: 1;
+    }
+  }
+
+  &:hover:before {
+    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
+    opacity: 1;
+  }
+`;
+
+const KeyName = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Counter = styled.div<{ isZero: boolean }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => (p.isZero ? p.theme.colors.error : p.theme.colors.textLowEmphasis)};
+  font-weight: 600;
+  padding-left: ${(p) => p.theme.spacing.xxs};
+`;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export { KeywordItem, KeyName, Counter, ActionsWrapper, IconWrapper };