@griddo/ax 11.11.8-rc.1 → 11.12.0

package/src/components/KeywordsPreviewModal/atoms.tsx

@@ -1,96 +0,0 @@
-import { useState } from "react";
-
-import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
-
-import * as S from "./style";
-
-const AddKeywordsModal = (props: IAddKeywordsModal) => {
-	const { isOpen, toggleModal, addNewKeyword } = props;
-
-	const [value, setValue] = useState<string[]>([]);
-
-	const handleChange = (newValue: string[]) => setValue(newValue);
-
-	const handleClick = () => {
-		addNewKeyword(value);
-		setValue([]);
-		toggleModal();
-	};
-
-	const handleClose = () => {
-		isOpen && toggleModal();
-		setValue([]);
-	};
-
-	const mainModalAction = {
-		title: "Create keyword",
-		onClick: handleClick,
-		disabled: !value.length,
-	};
-
-	const secondaryModalAction = { title: "Cancel", onClick: handleClose };
-
-	return (
-		<Modal
-			isOpen={isOpen}
-			hide={handleClose}
-			title="New keyword"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
-			size="S"
-			height={282}
-		>
-			<S.ModalContent>
-				<FieldsBehavior
-					fieldType="TagsField"
-					name="keywords"
-					title="Keywords"
-					value={value}
-					onChange={handleChange}
-					placeholder="Type a keyword..."
-					helptext="Type a tag and press enter to create it"
-				/>
-			</S.ModalContent>
-		</Modal>
-	);
-};
-
-interface IAddKeywordsModal extends IModal {
-	addNewKeyword: (value: string[]) => void;
-}
-
-const DeleteKeywordsModal = (props: IDeleteKeywordsModal) => {
-	const { isOpen, toggleModal, deleteKeyword } = props;
-
-	const mainModalAction = {
-		title: "Delete keyword",
-		onClick: deleteKeyword,
-	};
-
-	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
-
-	return (
-		<Modal
-			isOpen={isOpen}
-			hide={toggleModal}
-			title="Delete keyword"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
-			size="S"
-			height={240}
-		>
-			<S.ModalContent>
-				You are about to <strong>delete a keyword that is currently in use.</strong>
-				<br />
-				Please make sure you want to delete it.
-			</S.ModalContent>
-		</Modal>
-	);
-};
-
-interface IDeleteKeywordsModal extends IModal {
-	deleteKeyword: () => void;
-}
-
-export { AddKeywordsModal, DeleteKeywordsModal };

package/src/components/KeywordsPreviewModal/index.tsx

@@ -1,99 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { FloatingPanel, Icon, Toast } from "@ax/components";
-import { useModal, useToast } from "@ax/hooks";
-
-import { AddKeywordsModal } from "./atoms";
-import KeywordItem from "./KeywordItem";
-import { countKeywords } from "./utils";
-
-import * as S from "./style";
-
-const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
-	const { isOpen, browserRef, keywords, keywordsFilter, toggleModal, setKeywordsFilter, addKeywords, deleteKeyword } =
-		props;
-	const [keywordCounts, setKeywordCounts] = useState<Record<string, number>>({});
-	const [deletedKeyword, setDeletedKeyword] = useState<string | null>(null);
-	const { isOpen: isAddOpen, toggleModal: toggleAddModal } = useModal();
-	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
-
-	useEffect(() => {
-		if (isOpen && browserRef.current) {
-			const keywordCount = countKeywords(browserRef.current, keywords);
-			setKeywordCounts(keywordCount);
-		}
-	}, [isOpen, browserRef, keywords]);
-
-	const handleDeleteTag = () => setKeywordsFilter([]);
-
-	const handleAddTag = (tag: string) => () =>
-		keywordsFilter.includes(tag) ? setKeywordsFilter([]) : setKeywordsFilter([tag]);
-
-	useEffect(() => {
-		if (deletedKeyword && !keywords.includes(deletedKeyword)) {
-			toggleToast("1 Keyword deleted");
-			setDeletedKeyword(null);
-		}
-	}, [keywords, deletedKeyword, toggleToast]);
-
-	const handleDeleteKeyword = (value: string) => {
-		setDeletedKeyword(value);
-		deleteKeyword(value);
-	};
-
-	return (
-		<S.Wrapper>
-			<FloatingPanel title="Keywords" toggleModal={toggleModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
-				{isOpen && (
-					<S.KeywordsWrapper>
-						{keywordsFilter.length > 0 && (
-							<S.FilterWrapper>
-								<S.FilterText>Show keyword:</S.FilterText>
-								<S.TagList>
-									{keywordsFilter.map((tag: string) => {
-										return <S.StyledTag key={tag} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
-									})}
-								</S.TagList>
-							</S.FilterWrapper>
-						)}
-						<S.KeywordsListWrapper>
-							{keywords.length === 0 && <S.StyledSummaryButton />}
-							{Object.keys(keywordCounts).map((key, index) => {
-								const isSelected = keywordsFilter.includes(key);
-								return (
-									<KeywordItem
-										keyword={key}
-										count={keywordCounts[key]}
-										isSelected={isSelected}
-										onClick={handleAddTag(key)}
-										deleteKeyword={handleDeleteKeyword}
-										key={`${key}-${index}`}
-									/>
-								);
-							})}
-							<S.AddKeywordButton onClick={toggleAddModal}>
-								<Icon name="add" size="16" />
-								Add new keyword
-							</S.AddKeywordButton>
-						</S.KeywordsListWrapper>
-					</S.KeywordsWrapper>
-				)}
-			</FloatingPanel>
-			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={addKeywords} />
-			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
-		</S.Wrapper>
-	);
-};
-
-interface IKeywordsPreviewProps {
-	isOpen: boolean;
-	browserRef: React.RefObject<HTMLDivElement>;
-	toggleModal: () => void;
-	keywords: string[];
-	keywordsFilter: string[];
-	setKeywordsFilter: (value: string[]) => void;
-	addKeywords: (value: string[]) => void;
-	deleteKeyword: (value: string) => void;
-}
-
-export default KeywordsPreviewModal;

package/src/components/KeywordsPreviewModal/style.tsx

@@ -1,87 +0,0 @@
-import styled from "styled-components";
-
-import SummaryButton from "../Fields/SummaryButton";
-import Tag from "../Tag";
-
-const Wrapper = styled.div``;
-
-const KeywordsWrapper = 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 KeywordsListWrapper = styled.div``;
-
-const FilterWrapper = styled.div`
-  display: flex;
-  background-color: ${(p) => p.theme.color.uiBackground03};
-  width: 100%;
-  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.xs}`};
-  align-items: center;
-  border-radius: ${(p) => p.theme.radii.s};
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-`;
-
-const FilterText = styled.div`
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.color.textHighEmphasis};
-  margin-right: ${(p) => p.theme.spacing.xs};
-  flex-shrink: 0;
-`;
-
-const StyledTag = styled(Tag)`
-  margin-right: ${(p) => p.theme.spacing.xs};
-  margin-bottom: 0;
-`;
-
-const TagList = styled.div``;
-
-const AddKeywordButton = styled.button`
-  display: flex;
-  ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.colors.interactive01};
-  min-height: 40px;
-  width: 100%;
-  border: ${(p) => `1px dashed ${p.theme.colors.interactive01}`};
-  border-radius: ${(p) => p.theme.radii.s};
-  align-items: center;
-  justify-content: center;
-  svg {
-    margin-right: ${(p) => p.theme.spacing.xxs};
-  }
-`;
-
-const ModalContent = styled.div`
-  padding: ${(p) => p.theme.spacing.m};
-`;
-
-const StyledSummaryButton = styled(SummaryButton)`
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-`;
-
-export {
-	Wrapper,
-	KeywordsWrapper,
-	KeywordsListWrapper,
-	FilterWrapper,
-	FilterText,
-	StyledTag,
-	TagList,
-	AddKeywordButton,
-	ModalContent,
-	StyledSummaryButton,
-};

package/src/components/KeywordsPreviewModal/utils.tsx

@@ -1,22 +0,0 @@
-const countKeywords = (html: HTMLDivElement, keywords: string[]) => {
-	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
-
-	if (!frameContent) {
-		return {};
-	}
-
-	const htmlContent = frameContent.innerText.toLowerCase();
-	const keywordCounts: Record<string, number> = {};
-
-	keywords.forEach((keyword) => {
-		const lowerKeyword = keyword.toLowerCase();
-		const regex = new RegExp(lowerKeyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
-		const matches = htmlContent.match(regex);
-		keywordCounts[keyword] = matches ? matches.length : 0;
-	});
-
-	return keywordCounts;
-};
-
-export { countKeywords };

package/src/modules/FramePreview/HeadingsOverlay/index.tsx

@@ -1,113 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-import * as S from "./style";
-
-const headColors: Record<string, string> = {
-	h1: "#FFF06D",
-	h2: "#FFB8F8",
-	h3: "#73F8C8",
-	h4: "#9BEDFF",
-	h5: "#C6C1FF",
-	h6: "#FFCE95",
-};
-
-const isEffectivelyVisible = (el: HTMLElement): boolean => {
-	let node: HTMLElement | null = el;
-	while (node && node !== document.body) {
-		const style = window.getComputedStyle(node);
-		if (style.display === "none" || style.visibility === "hidden") return false;
-		if (parseFloat(style.opacity) === 0) return false;
-		node = node.parentElement;
-	}
-	return true;
-};
-
-const HeadingsOverlay = ({ headingFilter }: IHeadingsOverlayProps) => {
-	const [boxes, setBoxes] = useState<HeadingBox[]>([]);
-	const rafRef = useRef<number>(0);
-
-	useEffect(() => {
-		const update = () => {
-			cancelAnimationFrame(rafRef.current);
-			rafRef.current = requestAnimationFrame(() => {
-				const selector = headingFilter || "h1, h2, h3, h4, h5, h6";
-				const headings = Array.from(document.querySelectorAll<HTMLElement>(selector));
-				const scrollX = window.scrollX;
-				const scrollY = window.scrollY;
-				const boxes: HeadingBox[] = [];
-				for (let i = 0; i < headings.length; i++) {
-					const el = headings[i];
-					const rect = el.getBoundingClientRect();
-					if (rect.width === 0 && rect.height === 0) continue;
-					if (!isEffectivelyVisible(el)) continue;
-					boxes.push({
-						id: el.dataset.griddoid || `heading-${i}`,
-						tag: el.tagName.toLowerCase(),
-						rect,
-						scrollX,
-						scrollY,
-					});
-				}
-				setBoxes(boxes);
-			});
-		};
-
-		update();
-
-		window.addEventListener("resize", update);
-		window.addEventListener("scroll", update, true);
-		document.addEventListener("animationend", update, true);
-		document.addEventListener("transitionend", update, true);
-
-		const observer = new MutationObserver(update);
-		observer.observe(document.body, { childList: true, subtree: true, attributes: true });
-
-		return () => {
-			cancelAnimationFrame(rafRef.current);
-			window.removeEventListener("resize", update);
-			window.removeEventListener("scroll", update, true);
-			document.removeEventListener("animationend", update, true);
-			document.removeEventListener("transitionend", update, true);
-			observer.disconnect();
-		};
-	}, [headingFilter]);
-
-	return createPortal(
-		<div data-testid="headings-overlay">
-			{boxes.map(({ id, tag, rect, scrollX, scrollY }) => {
-				const color = headColors[tag];
-				if (!color) return null;
-				return (
-					<S.Box
-						key={id}
-						$color={color}
-						style={{
-							top: rect.top + scrollY,
-							left: rect.left + scrollX,
-							width: rect.width,
-							height: rect.height,
-						}}
-					>
-						<S.Label $color={color}>{tag.toUpperCase()}</S.Label>
-					</S.Box>
-				);
-			})}
-		</div>,
-		document.body,
-	);
-};
-
-interface HeadingBox {
-	id: string;
-	tag: string;
-	rect: DOMRect;
-	scrollX: number;
-	scrollY: number;
-}
-
-export interface IHeadingsOverlayProps {
-	headingFilter: string | null;
-}
-
-export default HeadingsOverlay;

package/src/modules/FramePreview/HeadingsOverlay/style.tsx

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-const Box = styled.div<{ $color: string }>`
-	position: absolute;
-	outline: 2px solid ${(p) => p.$color};
-	z-index: 1001;
-	pointer-events: none;
-`;
-
-const Label = styled.span<{ $color: string }>`
-	position: absolute;
-	background-color: ${(p) => p.$color};
-	color: ${(p) => p.theme.colors.textHighEmphasis};
-	${(p) => p.theme.textStyle.uiS};
-	padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
-	transform: rotate(-90deg);
-	top: 1px;
-	left: -23px;
-	font-family: Source Sans Pro;
-	font-style: normal;
-	text-decoration: none;
-`;
-
-export { Box, Label };

package/src/modules/FramePreview/utils.tsx

@@ -1,140 +0,0 @@
-const addIdsToHeadings = (container: HTMLElement, headingFilter: string | null): void => {
-	const selected = headingFilter ? headingFilter : "h1, h2, h3, h4, h5, h6";
-	const headings = container.querySelectorAll<HTMLElement>(selected);
-
-	headings.forEach((heading, index) => {
-		const text = heading.textContent?.trim();
-		if (!text) return;
-
-		heading.dataset.griddoid = `heading-${index + 1}`;
-	});
-};
-
-const observeAndAddIdsToHeadings = (container: HTMLElement, headingFilter: string | null): (() => void) => {
-	addIdsToHeadings(container, headingFilter);
-
-	const observer = new MutationObserver(() => {
-		addIdsToHeadings(container, headingFilter);
-	});
-
-	observer.observe(container, {
-		childList: true,
-		subtree: true,
-	});
-
-	return () => observer.disconnect();
-};
-
-const KEYWORD_HIGHLIGHT_CLASS = "gdd-keyword";
-
-const removeKeywordHighlights = (container: HTMLElement): void => {
-	const marks = container.querySelectorAll<HTMLElement>(`mark.${KEYWORD_HIGHLIGHT_CLASS}`);
-
-	marks.forEach((mark) => {
-		const parent = mark.parentNode;
-		if (!parent) return;
-		parent.replaceChild(document.createTextNode(mark.textContent || ""), mark);
-		parent.normalize();
-	});
-};
-
-const buildKeywordsRegex = (keywords: string[]): RegExp | null => {
-	const escapedKeywords = keywords
-		.filter((k) => k.trim())
-		.sort((a, b) => b.length - a.length)
-		.map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
-
-	if (!escapedKeywords.length) return null;
-
-	return new RegExp(`(${escapedKeywords.join("|")})`, "gi");
-};
-
-const collectTextNodes = (container: HTMLElement): Text[] => {
-	const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
-		acceptNode: (node) => {
-			const parent = node.parentElement;
-			if (!parent) return NodeFilter.FILTER_REJECT;
-			if (["SCRIPT", "STYLE"].includes(parent.tagName)) return NodeFilter.FILTER_REJECT;
-			if (parent.classList.contains(KEYWORD_HIGHLIGHT_CLASS)) return NodeFilter.FILTER_REJECT;
-			return NodeFilter.FILTER_ACCEPT;
-		},
-	});
-
-	const textNodes: Text[] = [];
-	let current = walker.nextNode();
-	while (current) {
-		textNodes.push(current as Text);
-		current = walker.nextNode();
-	}
-
-	return textNodes;
-};
-
-const wrapMatches = (text: string, regex: RegExp): DocumentFragment => {
-	const fragment = document.createDocumentFragment();
-	let lastIndex = 0;
-	let match = regex.exec(text);
-
-	while (match !== null) {
-		if (match.index > lastIndex) {
-			fragment.appendChild(document.createTextNode(text.slice(lastIndex, match.index)));
-		}
-
-		const mark = document.createElement("mark");
-		mark.className = KEYWORD_HIGHLIGHT_CLASS;
-		mark.textContent = match[0];
-		fragment.appendChild(mark);
-
-		lastIndex = regex.lastIndex;
-		match = regex.exec(text);
-	}
-
-	if (lastIndex < text.length) {
-		fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
-	}
-
-	return fragment;
-};
-
-const highlightKeywords = (container: HTMLElement, keywords: string[]): void => {
-	removeKeywordHighlights(container);
-
-	const regex = buildKeywordsRegex(keywords);
-	if (!regex) return;
-
-	const textNodes = collectTextNodes(container);
-
-	for (const textNode of textNodes) {
-		const text = textNode.textContent || "";
-		if (!regex.test(text)) continue;
-		regex.lastIndex = 0;
-
-		const fragment = wrapMatches(text, regex);
-		textNode.parentNode?.replaceChild(fragment, textNode);
-	}
-};
-
-const observeAndHighlightKeywords = (container: HTMLElement, keywords: string[]): (() => void) => {
-	const observer = new MutationObserver(() => {
-		observer.disconnect();
-		highlightKeywords(container, keywords);
-		observer.observe(container, { childList: true, subtree: true });
-	});
-
-	highlightKeywords(container, keywords);
-	observer.observe(container, { childList: true, subtree: true });
-
-	return () => {
-		observer.disconnect();
-		removeKeywordHighlights(container);
-	};
-};
-
-export {
-	addIdsToHeadings,
-	observeAndAddIdsToHeadings,
-	highlightKeywords,
-	removeKeywordHighlights,
-	observeAndHighlightKeywords,
-	KEYWORD_HIGHLIGHT_CLASS,
-};