@griddo/ax 11.11.8-rc.1 → 11.12.0

package/src/__tests__/modules/FramePreview/HeadingsOverlay/HeadingsOverlay.test.tsx

@@ -1,185 +0,0 @@
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, act } from "@testing-library/react";
-import { parseTheme } from "@ax/helpers";
-import "@testing-library/jest-dom";
-
-import HeadingsOverlay from "@ax/modules/FramePreview/HeadingsOverlay";
-import globalTheme from "@ax/themes/theme.json";
-
-const renderWithTheme = (ui: React.ReactElement) =>
-	render(<ThemeProvider theme={parseTheme(globalTheme)}>{ui}</ThemeProvider>);
-
-beforeEach(() => {
-	jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
-		cb(0);
-		return 0;
-	});
-});
-
-afterEach(() => {
-	cleanup();
-	for (const el of document.querySelectorAll("h1, h2, h3, h4, h5, h6")) el.remove();
-	jest.restoreAllMocks();
-});
-
-describe("HeadingsOverlay rendering", () => {
-	it("should render without boxes when no headings exist in the document", () => {
-		renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-
-		expect(screen.queryByText("H1")).toBeNull();
-		expect(screen.queryByText("H2")).toBeNull();
-	});
-
-	it("should render a labeled box for an h1 element with a non-zero bounding rect", async () => {
-		const h1 = document.createElement("h1");
-		h1.dataset.griddoid = "heading-1";
-		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
-			top: 10,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 50,
-			right: 210,
-			x: 10,
-			y: 10,
-			toJSON: () => {},
-		} as DOMRect);
-
-		await act(async () => {
-			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-		});
-
-		expect(screen.getByText("H1")).toBeTruthy();
-	});
-
-	it("should render an uppercase label for the heading tag", async () => {
-		const h2 = document.createElement("h2");
-		h2.dataset.griddoid = "heading-1";
-		document.body.appendChild(h2);
-		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
-			top: 10,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 50,
-			right: 210,
-			x: 10,
-			y: 10,
-			toJSON: () => {},
-		} as DOMRect);
-
-		await act(async () => {
-			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-		});
-
-		expect(screen.getByText("H2")).toBeTruthy();
-	});
-
-	it("should not render boxes for headings with zero bounding rect", () => {
-		const h1 = document.createElement("h1");
-		document.body.appendChild(h1);
-		// JSDOM returns zero rect by default — no mock needed
-
-		renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-
-		expect(screen.queryByText("H1")).toBeNull();
-	});
-
-	it("should not render a box for a heading with display:none", async () => {
-		const h1 = document.createElement("h1");
-		h1.dataset.griddoid = "heading-1";
-		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
-			top: 10,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 50,
-			right: 210,
-			x: 10,
-			y: 10,
-			toJSON: () => {},
-		} as DOMRect);
-
-		const originalGetComputedStyle = window.getComputedStyle.bind(window);
-		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
-			if (el === h1) return { display: "none", visibility: "", opacity: "1" } as CSSStyleDeclaration;
-			return originalGetComputedStyle(el);
-		});
-
-		await act(async () => {
-			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-		});
-
-		expect(screen.queryByText("H1")).toBeNull();
-	});
-
-	it("should not render a box for a heading with opacity 0", async () => {
-		const h1 = document.createElement("h1");
-		h1.dataset.griddoid = "heading-1";
-		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
-			top: 10,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 50,
-			right: 210,
-			x: 10,
-			y: 10,
-			toJSON: () => {},
-		} as DOMRect);
-
-		const originalGetComputedStyle = window.getComputedStyle.bind(window);
-		jest.spyOn(window, "getComputedStyle").mockImplementation((el) => {
-			if (el === h1) return { display: "block", visibility: "visible", opacity: "0" } as CSSStyleDeclaration;
-			return originalGetComputedStyle(el);
-		});
-
-		await act(async () => {
-			renderWithTheme(<HeadingsOverlay headingFilter={null} />);
-		});
-
-		expect(screen.queryByText("H1")).toBeNull();
-	});
-
-	it("should only render boxes for headings matching the headingFilter", async () => {
-		const h1 = document.createElement("h1");
-		h1.dataset.griddoid = "heading-1";
-		document.body.appendChild(h1);
-		jest.spyOn(h1, "getBoundingClientRect").mockReturnValue({
-			top: 10,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 50,
-			right: 210,
-			x: 10,
-			y: 10,
-			toJSON: () => {},
-		} as DOMRect);
-
-		const h2 = document.createElement("h2");
-		h2.dataset.griddoid = "heading-2";
-		document.body.appendChild(h2);
-		jest.spyOn(h2, "getBoundingClientRect").mockReturnValue({
-			top: 60,
-			left: 10,
-			width: 200,
-			height: 40,
-			bottom: 100,
-			right: 210,
-			x: 10,
-			y: 60,
-			toJSON: () => {},
-		} as DOMRect);
-
-		await act(async () => {
-			renderWithTheme(<HeadingsOverlay headingFilter="h1" />);
-		});
-
-		expect(screen.getByText("H1")).toBeTruthy();
-		expect(screen.queryByText("H2")).toBeNull();
-	});
-});

package/src/components/Browser/utils.tsx

@@ -1,13 +0,0 @@
-const calcAutoZoom = (containerWidth: number, resolution: string): string => {
-	const resolutionWidth = parseInt(resolution);
-	if (!containerWidth || !resolutionWidth) return "100";
-	return String(Math.min(100, Math.floor((containerWidth / resolutionWidth) * 100)));
-};
-
-const calcDefaultResolution = (containerWidth: number, options: Array<{ value: string }>): string => {
-	const sorted = [...options].sort((a, b) => parseInt(a.value) - parseInt(b.value));
-	const best = sorted.find((opt) => parseInt(opt.value) >= containerWidth);
-	return best ? best.value : sorted[sorted.length - 1].value;
-};
-
-export { calcAutoZoom, calcDefaultResolution };

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

@@ -1,36 +0,0 @@
-import * as S from "./style";
-
-const SEOPreview = (props: IHeadingsPreviewProps) => {
-	const { actions } = props;
-	const { toggleHeadingsPreviewAction, toggleKeywordsPreviewAction } = actions || {};
-
-	return (
-		<S.Wrapper>
-			<S.TextWrapper>
-				Quickly review page <strong>headings</strong> for correctness it before publishing. You can also edit the text.
-			</S.TextWrapper>
-			<S.ButtonWrapper>
-				<S.StyledButton type="button" onClick={toggleHeadingsPreviewAction}>
-					Open Headings preview
-				</S.StyledButton>
-			</S.ButtonWrapper>
-			<S.TextWrapper margin>
-				Review the <strong>Keywords</strong> of the page in a quick way before publishing.
-			</S.TextWrapper>
-			<S.ButtonWrapper>
-				<S.StyledButton type="button" onClick={toggleKeywordsPreviewAction}>
-					Open Keywords preview
-				</S.StyledButton>
-			</S.ButtonWrapper>
-		</S.Wrapper>
-	);
-};
-
-interface IHeadingsPreviewProps {
-	actions?: {
-		toggleHeadingsPreviewAction?: () => void;
-		toggleKeywordsPreviewAction?: () => void;
-	};
-}
-
-export default SEOPreview;

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

@@ -1,24 +0,0 @@
-import { Button } from "@ax/components";
-
-import styled from "styled-components";
-
-const Wrapper = styled.div``;
-
-const TextWrapper = styled.div<{ margin?: boolean }>`
-  ${(p) => p.theme.textStyle.uiM};
-  color: ${(p) => p.theme.colors.textHighEmphasis};
-  margin-top: ${(p) => (p.margin ? p.theme.spacing.m : 0)};
-`;
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: ${(p) => p.theme.spacing.xs};
-`;
-
-const StyledButton = styled((props) => <Button {...props} />)`
-  width: 100%;
-  max-width: 286px;
-`;
-
-export { Wrapper, TextWrapper, ButtonWrapper, StyledButton };

package/src/components/FloatingNote/index.tsx

@@ -1,35 +0,0 @@
-import { Button, Icon } from "@ax/components";
-
-import * as S from "./style";
-
-const FloatingNote = (props: IFloatingNoteProps): JSX.Element => {
-	const { message, icon, className, btnText, onClick } = props;
-
-	return (
-		<S.Wrapper data-testid="floating-note-wrapper" className={className}>
-			{icon && (
-				<S.IconWrapper>
-					<Icon name={icon} size="16" />
-				</S.IconWrapper>
-			)}
-			<S.Text data-testid="floating-note-message">{message}</S.Text>
-			{btnText && (
-				<S.ActionWrapper>
-					<Button type="button" buttonStyle="minimal" onClick={onClick}>
-						{btnText}
-					</Button>
-				</S.ActionWrapper>
-			)}
-		</S.Wrapper>
-	);
-};
-
-export interface IFloatingNoteProps {
-	message: string;
-	icon?: string;
-	className?: string;
-	btnText?: string;
-	onClick?: () => void;
-}
-
-export default FloatingNote;

package/src/components/FloatingNote/style.tsx

@@ -1,26 +0,0 @@
-import styled from "styled-components";
-
-const Wrapper = styled.div`
-  display: flex;
-  background-color: ${(p) => p.theme.color.uiBackground03};
-  padding: ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
-  z-index: 98;
-`;
-
-const Text = styled.div`
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
-`;
-
-const IconWrapper = styled.div`
-  width: ${(p) => p.theme.spacing.s};
-  height: ${(p) => p.theme.spacing.s};
-  margin-right: ${(p) => p.theme.spacing.xs};
-`;
-
-const ActionWrapper = styled.div`
-  margin-left: auto;
-`;
-
-export { Wrapper, Text, IconWrapper, ActionWrapper };

package/src/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/index.tsx

@@ -1,85 +0,0 @@
-import { useState } from "react";
-
-import { Icon, Tooltip } from "@ax/components";
-
-import type { IHeadingError } from "../../utils";
-
-import * as S from "./style";
-
-const ErrorsItem = (props: IErrorsItemProps) => {
-	const { error, onSelectHeading } = props;
-	const { message, description, headingIds } = error;
-
-	const [isOpen, setIsOpen] = useState(false);
-	const [isDeleted, setIsDeleted] = useState(false);
-	const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-
-	const handlePrevious = () => {
-		if (!currentIndex) return;
-		const newIndex = currentIndex - 1;
-		setCurrentIndex(newIndex);
-		onSelectHeading(headingIds[newIndex])();
-	};
-
-	const handleNext = () => {
-		const newIndex = currentIndex === null ? 0 : currentIndex + 1;
-		if (newIndex > headingIds.length - 1) return;
-		setCurrentIndex(newIndex);
-		onSelectHeading(headingIds[newIndex])();
-	};
-
-	const handleOpen = () => {
-		setIsOpen(!isOpen);
-		setCurrentIndex(0);
-		onSelectHeading(headingIds[0])();
-	};
-
-	const errorText =
-		headingIds.length > 1 && currentIndex !== null
-			? `${currentIndex + 1} of ${headingIds.length} headings`
-			: `${headingIds.length} headings`;
-
-	if (isDeleted) {
-		return <></>;
-	}
-
-	return (
-		<S.ErrorItem>
-			<Tooltip content={description}>
-				<S.ErrorHeader>
-					<S.ErrorMessage>{message}</S.ErrorMessage>
-					<S.ErrorActions>
-						{headingIds.length > 0 && (
-							<S.IconWrapper onClick={handleOpen}>
-								<Icon name={isOpen ? "UpArrow" : "DownArrow"} size="16" />
-							</S.IconWrapper>
-						)}
-						<S.IconWrapper onClick={() => setIsDeleted(true)}>
-							<Icon name="close" size="16" />
-						</S.IconWrapper>
-					</S.ErrorActions>
-				</S.ErrorHeader>
-			</Tooltip>
-			<S.ErrorContentWrapper isOpen={isOpen}>
-				<S.ErrorContent>
-					<S.ErrorContentActions>
-						<S.IconWrapper onClick={handlePrevious} isDisabled={!currentIndex}>
-							<Icon name="UpArrow" size="16" />
-						</S.IconWrapper>
-						<S.IconWrapper onClick={handleNext} isDisabled={currentIndex === headingIds.length - 1}>
-							<Icon name="DownArrow" size="16" />
-						</S.IconWrapper>
-					</S.ErrorContentActions>
-					<S.ErrorContentText>{errorText}</S.ErrorContentText>
-				</S.ErrorContent>
-			</S.ErrorContentWrapper>
-		</S.ErrorItem>
-	);
-};
-
-interface IErrorsItemProps {
-	error: IHeadingError;
-	onSelectHeading: (id: number) => () => void;
-}
-
-export default ErrorsItem;

package/src/components/HeadingsPreviewModal/ErrorsBanner/ErrorItem/style.tsx

@@ -1,80 +0,0 @@
-import styled from "styled-components";
-
-const ErrorItem = styled.li`
-  display: flex;
-  background-color: ${(p) => p.theme.colors.uiBackground02};
-  border: ${(p) => `1px solid ${p.theme.colors.uiLine}`};
-  padding: ${(p) => p.theme.spacing.xs};
-  margin-bottom: ${(p) => p.theme.spacing.xxs};
-  border-radius: ${(p) => p.theme.radii.s};
-  flex-direction: column;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const ErrorHeader = styled.div`
-  display: flex;
-  width: 100%;
-`;
-
-const ErrorMessage = styled.div`
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.colors.textHighEmphasis};
-  font-weight: 400;
-`;
-
-const ErrorActions = styled.div`
-  display: flex;
-  margin-left: auto;
-  align-items: start;
-  gap: ${(p) => p.theme.spacing.xxs};
-  padding-left: ${(p) => p.theme.spacing.xs};
-`;
-
-const IconWrapper = styled.button<{ isDisabled?: boolean }>`
-  width: ${(p) => p.theme.spacing.s};
-  height: ${(p) => p.theme.spacing.s};
-  svg {
-    path {
-      fill: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
-    }
-  }
-`;
-
-const ErrorContentWrapper = styled.div<{ isOpen: boolean }>`
-  width: 100%;
-  overflow: hidden;
-  height: ${(p) => (p.isOpen ? "auto" : "0")};
-  transition: height 1s ease-in-out;
-`;
-
-const ErrorContent = styled.div`
-  display: flex;
-  width: 100%;
-  margin-top: ${(p) => p.theme.spacing.xxs};
-`;
-
-const ErrorContentActions = styled.div`
-  display: flex;
-  gap: ${(p) => p.theme.spacing.xxs};
-`;
-
-const ErrorContentText = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.colors.textMediumEmphasis};
-  margin-left: ${(p) => p.theme.spacing.s};
-`;
-
-export {
-	ErrorItem,
-	ErrorHeader,
-	ErrorMessage,
-	ErrorActions,
-	IconWrapper,
-	ErrorContentWrapper,
-	ErrorContent,
-	ErrorContentActions,
-	ErrorContentText,
-};

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

@@ -1,57 +0,0 @@
-import { useState } from "react";
-
-import { Icon } from "@ax/components";
-
-import type { IHeadingError } from "../utils";
-import ErrorItem from "./ErrorItem";
-
-import * as S from "./style";
-
-const ErrorsBanner = (props: IErrorsBannerProps) => {
-	const { errors, onSelectHeading, isOpen, setIsOpen, resetKey } = props;
-
-	const [isDeleted, setIsDeleted] = useState(false);
-
-	if (isDeleted) {
-		return <></>;
-	}
-
-	return (
-		<S.ErrorsWrapper>
-			<S.ErrorsHeader>
-				<S.WarningWrapper>
-					<Icon name="warning" size="16" />
-				</S.WarningWrapper>
-				<S.HeaderText>SEO Alerts</S.HeaderText>
-				<S.HeaderActions>
-					<S.ToggleWrapper onClick={() => setIsOpen(!isOpen)}>
-						<Icon name={isOpen ? "UpArrow" : "DownArrow"} size="24" />
-					</S.ToggleWrapper>
-					<S.IconWrapper onClick={() => setIsDeleted(true)}>
-						<Icon name="close" size="16" />
-					</S.IconWrapper>
-				</S.HeaderActions>
-			</S.ErrorsHeader>
-			<S.ErrorsContent isOpen={isOpen}>
-				<S.Description>
-					Review <strong>suggestions and warnings</strong> to enhance your page's search engine optimization.
-				</S.Description>
-				<S.ErrorListWrapper>
-					{errors.map((error) => (
-						<ErrorItem key={`${error.message}-${resetKey}`} error={error} onSelectHeading={onSelectHeading} />
-					))}
-				</S.ErrorListWrapper>
-			</S.ErrorsContent>
-		</S.ErrorsWrapper>
-	);
-};
-
-interface IErrorsBannerProps {
-	errors: IHeadingError[];
-	onSelectHeading: (id: number) => () => void;
-	isOpen: boolean;
-	setIsOpen: (value: boolean) => void;
-	resetKey: number;
-}
-
-export default ErrorsBanner;

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

@@ -1,82 +0,0 @@
-import styled from "styled-components";
-
-const ErrorsWrapper = styled.div`
-  position: sticky;
-  top: 0;
-  background-color: ${(p) => p.theme.colors.uiBackground03};
-  width: 100%;
-  padding: ${(p) => p.theme.spacing.s};
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-  border-radius: ${(p) => p.theme.radii.s};
-  z-index: 2;
-`;
-
-const ErrorsHeader = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const WarningWrapper = styled.div`
-  width: ${(p) => p.theme.spacing.s};
-  height: ${(p) => p.theme.spacing.s};
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive02};
-    }
-  }
-`;
-
-const HeaderText = styled.div`
-  ${(p) => p.theme.textStyle.uiM};
-  color: ${(p) => p.theme.colors.textHighEmphasis};
-  margin-left: ${(p) => p.theme.spacing.xxs};
-  font-weight: 600;
-`;
-
-const HeaderActions = styled.div`
-  display: flex;
-  margin-left: auto;
-  gap: ${(p) => p.theme.spacing.xxs};
-  align-items: center;
-`;
-
-const ToggleWrapper = styled.button`
-  width: ${(p) => p.theme.spacing.m};
-  height: ${(p) => p.theme.spacing.m};
-`;
-
-const IconWrapper = styled.button`
-  width: ${(p) => p.theme.spacing.s};
-  height: ${(p) => p.theme.spacing.s};
-`;
-
-const ErrorsContent = styled.div<{ isOpen: boolean }>`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  height: ${(p) => (p.isOpen ? "auto" : "0")};
-  transition: height 1s ease-in-out;
-`;
-
-const Description = styled.div`
-  ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.colors.textMediumEmphasis};
-  margin-top: ${(p) => p.theme.spacing.xs};
-`;
-
-const ErrorListWrapper = styled.ul`
-  margin-top: ${(p) => p.theme.spacing.xs};
-`;
-
-export {
-	ErrorsWrapper,
-	ErrorsHeader,
-	IconWrapper,
-	WarningWrapper,
-	HeaderText,
-	HeaderActions,
-	ErrorsContent,
-	ToggleWrapper,
-	Description,
-	ErrorListWrapper,
-};

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

@@ -1,71 +0,0 @@
-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;