@griddo/ax 11.11.7 → 11.11.8-rc.1

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

@@ -1,10 +1,10 @@
-import React, { useState, useRef } from "react";
+import { useState, useRef } from "react";
 import { Tag } from "@ax/components";
 
 import * as S from "./style";
 
 const TagsField = (props: IProps): JSX.Element => {
-	const { value, onChange, disabled } = props;
+	const { value, onChange, disabled, placeholder } = props;
 	const valueArray = value && Array.isArray(value) ? value : [];
 	const [inputValue, setInputValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -33,22 +33,21 @@ const TagsField = (props: IProps): JSX.Element => {
 		onChange(newValue);
 	};
 
-	const placeholder = valueArray.length > 0 ? "" : "Type a tag...";
+	const finalPlaceholder = valueArray.length > 0 ? "" : placeholder ? placeholder : "Type a tag...";
 
 	return (
 		<S.Wrapper data-testid="tag-field-wrapper" onClick={_handleClick}>
-			{valueArray &&
-				valueArray.map((tag: string, index: number) => {
-					const handleDelete = () => deleteTag(index);
-					return <Tag key={tag} text={tag} onDeleteAction={disabled ? undefined : handleDelete} />;
-				})}
+			{valueArray?.map((tag: string, index: number) => {
+				const handleDelete = () => deleteTag(index);
+				return <Tag key={tag} text={tag} onDeleteAction={disabled ? undefined : handleDelete} />;
+			})}
 			<S.Input
 				data-testid="tag-field-input"
 				ref={inputRef}
 				type="text"
 				value={inputValue}
 				onChange={_handleChange}
-				placeholder={placeholder}
+				placeholder={finalPlaceholder}
 				onKeyDown={_handleKeyDown}
 				disabled={disabled}
 				spellCheck={true}

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

@@ -1,9 +1,9 @@
-import React, { memo, useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
 import { IconAction, TextField, FloatingPanel, FieldsBehavior, PageFinder } from "@ax/components";
 import { useModal } from "@ax/hooks";
 import { isReqOk } from "@ax/helpers";
-import { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
+import type { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
 import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
@@ -29,7 +29,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	const [internalPageName, setInternalPageName] = useState(null);
 	const [pageData, setPageData] = useState<IPage | null>(null);
 
-	const pageID = value && value.linkTo ? value.linkTo : null;
+	const pageID = value?.linkTo ? value.linkTo : null;
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -67,13 +67,13 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
 	const handleOnClick = () => {
 		toggleModal();
-		handlePanel && handlePanel(isOpen);
+		handlePanel?.(isOpen);
 	};
 
 	const handleReset = () => {
 		onChange(null);
 		setInternalPageName(null);
-		resetValidation && resetValidation();
+		resetValidation?.();
 	};
 
 	const handleSetPage = (page: IPage | IPage[]) => {
@@ -85,10 +85,10 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			linkTo: selectedPage.id,
 			linkToURL: selectedPage.fullUrl,
 			title: selectedPage.title,
-			noFollow: !selectedPage.follow ? true : false,
+			noFollow: !selectedPage.follow,
 		});
-		handleValidation && handleValidation(selectedPage.id.toString(), validators);
-		handlePanel && handlePanel(isOpen);
+		handleValidation?.(selectedPage.id.toString(), validators);
+		handlePanel?.(isOpen);
 	};
 
 	const handleChange = (newValue: string) => onChange({ ...value, href: newValue });
@@ -113,7 +113,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	};
 
 	const validator = { format: "fullURL" };
-	const defensiveHref = value && value.href ? value.href : "";
+	const defensiveHref = value?.href ? value.href : "";
 
 	let field = (
 		<TextField
@@ -140,7 +140,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 		);
 	}
 
-	const titleValue = value && value.title ? value.title : internalPageName ? internalPageName : "";
+	const titleValue = value?.title ? value.title : internalPageName ? internalPageName : "";
 	const noFollowValue =
 		value && value.noFollow !== undefined
 			? value.noFollow
@@ -160,7 +160,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			type: "UniqueCheck" as Field,
 			name: "newTab",
 			options: [{ title: "Open in new tab" }],
-			value: value && value.newTab ? value.newTab : null,
+			value: value?.newTab ? value.newTab : null,
 			onChange: handleNewTabChange,
 		},
 		{
@@ -175,7 +175,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 	return (
 		<S.UrlFieldWrapper data-testid="url-field-wrapper">
 			{field}
-			{value && value.linkTo && isTabsVisible && (
+			{value?.linkTo && isTabsVisible && (
 				<S.AnchorWrapper>
 					<FieldsBehavior
 						title="Tab"
@@ -188,7 +188,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 					/>
 				</S.AnchorWrapper>
 			)}
-			{value && value.linkTo && isVisible && (
+			{value?.linkTo && isVisible && (
 				<S.AnchorWrapper>
 					<FieldsBehavior
 						title="Anchor"
@@ -203,20 +203,19 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 			)}
 			{showAdvanced && (
 				<S.AdvancedWrapper>
-					{advancedFields &&
-						advancedFields.map((adField) => {
-							return (
-								<FieldsBehavior
-									key={adField.name}
-									options={adField.options}
-									name={adField.name}
-									title={adField.title}
-									fieldType={adField.type}
-									value={adField.value}
-									onChange={adField.onChange}
-								/>
-							);
-						})}
+					{advancedFields?.map((adField) => {
+						return (
+							<FieldsBehavior
+								key={adField.name}
+								options={adField.options}
+								name={adField.name}
+								title={adField.title}
+								fieldType={adField.type}
+								value={adField.value}
+								onChange={adField.onChange}
+							/>
+						);
+					})}
 				</S.AdvancedWrapper>
 			)}
 			<FloatingPanel

package/src/components/Fields/index.tsx

@@ -17,6 +17,7 @@ import FormCategorySelect from "./FormCategorySelect";
 import FormContainer from "./FormContainer";
 import FormFieldArray from "./FormFieldArray";
 import HeadingField from "./HeadingField";
+import SEOPreview from "./SEOPreview";
 import HiddenField from "./HiddenField";
 import ImageField from "./ImageField";
 import LinkField from "./LinkField";
@@ -64,6 +65,7 @@ export {
 	FormContainer,
 	FormFieldArray,
 	HeadingField,
+	SEOPreview,
 	HiddenField,
 	ImageField,
 	LinkField,

package/src/components/FloatingNote/index.tsx

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

@@ -0,0 +1,26 @@
+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/FloatingPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef } from "react";
+import { memo, useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { useHandleClickOutside } from "@ax/hooks";
@@ -16,12 +16,13 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 		handlePanel,
 		secondary,
 		closeOnOutsideClick = true,
+		width,
 	} = props;
 
 	const node = useRef<HTMLElement>(null);
 
 	const handleClickOutside = (e: any) => {
-		if ((node.current && node.current.contains(e.target)) || isOpenedSecond || !closeOnOutsideClick) {
+		if (node.current?.contains(e.target) || isOpenedSecond || !closeOnOutsideClick) {
 			return;
 		}
 		toggleModal();
@@ -46,6 +47,7 @@ const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
 			isOpen={isOpen}
 			isOpenedSecond={isOpenedSecond}
 			secondary={secondary}
+			width={width}
 		>
 			<S.Header>
 				<S.Title>{title}</S.Title>
@@ -70,6 +72,7 @@ export interface IFloatingPanelProps {
 	handlePanel?: (value: boolean) => void;
 	secondary?: boolean;
 	closeOnOutsideClick?: boolean;
+	width?: number;
 }
 
 export default memo(FloatingPanel);

package/src/components/FloatingPanel/style.tsx

@@ -17,12 +17,13 @@ export const Wrapper = styled.section<{
 	isOpen: boolean;
 	isOpenedSecond: boolean | undefined;
 	secondary?: boolean;
+	width?: number;
 }>`
   position: fixed;
   right: 0;
   top: 0;
   z-index: 1200;
-  width: calc(${(p) => p.theme.spacing.xl} * 6);
+  width: ${(p) => (p.width ? `${p.width}px` : `calc(${p.theme.spacing.xl} * 6)`)};
   height: 100vh;
   background: ${(p) => p.theme.colors.uiBackground01};
   box-shadow: ${(p) => (p.secondary || !p.isOpen ? `none` : p.theme.shadow.rightPanel)};

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

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

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

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

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

@@ -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;