@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/components/Browser/style.tsx

@@ -1,9 +1,15 @@
+import { FloatingNote } from "@ax/components";
+
 import styled, { css } from "styled-components";
 
-const BrowserWrapper = styled.div`
+const BrowserWrapper = styled.div<{ scaledWidth?: number; isPreview?: boolean }>`
   background-color: ${(p) => p.theme.color.uiBackground01};
-  height: 100%;
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: ${(p) => (p.isPreview ? "100%" : `calc(100vh - ${p.theme.spacing.xl} - (${p.theme.spacing.m} * 2))`)};
+  min-width: 360px;
+  width: ${(p) => (p.scaledWidth !== undefined ? `${p.scaledWidth}px` : "100%")};
+  margin: 0 auto;
 `;
 
 const NavBar = styled.div`
@@ -22,6 +28,9 @@ const NavUrl = styled.div`
   height: ${(p) => p.theme.spacing.m};
   padding: ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.s};
   width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 const NavActions = styled.div`
@@ -59,17 +68,24 @@ const FrameWrapper = styled.div<{ hasBorder: boolean; isFormEditor: boolean }>`
   border-bottom: ${(p) => (p.hasBorder ? `1px solid ${p.theme.color.uiLine}` : "none")};
   display: flex;
   justify-content: center;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
 `;
 
+const OuterContainer = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
 const Wrapper = styled.div`
   border-left: 1px solid ${(p) => p.theme.color.uiLine};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   position: relative;
 
   .headroom {
@@ -77,4 +93,57 @@ const Wrapper = styled.div`
   }
 `;
 
-export { BrowserWrapper, FrameWrapper, IconWrapper, NavActions, NavBar, NavUrl, Wrapper };
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+`;
+
+const StyledFloatingNote = styled(({ $compact: _, ...props }) => <FloatingNote {...props} />)<{ $compact?: boolean }>`
+  position: absolute;
+  left: ${(p) => p.theme.spacing.s};
+  top: ${(p) => p.theme.spacing.s};
+  right: ${(p) => p.theme.spacing.s};
+  ${(p) => p.$compact && `&& { padding: ${p.theme.spacing.xs} ${p.theme.spacing.s}; }`}
+`;
+
+const ResolutionWrapper = styled.div`
+  display: flex;
+  margin-left: ${(p) => p.theme.spacing.xs};
+  min-width: 115px;
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-radius: 10px;
+  align-items: center;
+  height: 24px;
+`;
+
+const SelectLabel = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  flex-shrink: 0;
+  padding-left: ${(p) => p.theme.spacing.xs};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const ZoomWrapper = styled.div`
+  margin-left: ${(p) => p.theme.spacing.s};
+  min-width: 65px;
+`;
+
+export {
+	OuterContainer,
+	BrowserWrapper,
+	NavBar,
+	NavUrl,
+	NavActions,
+	IconWrapper,
+	FrameWrapper,
+	Wrapper,
+	ContentWrapper,
+	StyledFloatingNote,
+	ResolutionWrapper,
+	ZoomWrapper,
+	SelectLabel,
+};

package/src/components/Browser/utils.tsx

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Icon, Loader } from "@ax/components";
+import Icon from "../Icon";
+import Loader from "../Loader";
 
 import * as S from "./style";
 

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
 import { getInnerFields } from "@ax/forms";
 import { FieldContainer, FieldGroup } from "@ax/components";
-import { IErrorItem, IPage, ISite, ILanguage } from "@ax/types";
+import type { IErrorItem, IPage, ISite, ILanguage } from "@ax/types";
 
 const Field = (props: IFieldProps): JSX.Element => {
 	const {
@@ -56,7 +54,7 @@ const Field = (props: IFieldProps): JSX.Element => {
 	}
 
 	return isGroup ? (
-		<FieldGroup title={field.title} collapsed={isCollapsed}>
+		<FieldGroup title={field.title} collapsed={isCollapsed} solid={field.solid}>
 			{innerFields}
 		</FieldGroup>
 	) : (

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

@@ -56,12 +56,25 @@ export const StyledSelect = styled(AsyncSelect)<{
     max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     margin-top: 0;
     z-index: 99;
+
     .react-select__menu-list {
       border: 1px solid ${(p) => p.theme.color.uiLine};
       border-radius: 4px;
       max-height: calc(${(p) => p.theme.spacing.l} * 3);
       overflow: auto;
       padding: 0;
+
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 4px;
+        height: 100%;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: ${(p) => p.theme.colors.iconNonActive};
+      }
+
       .react-select__option {
         background-color: ${(p) => p.theme.color.interactiveBackground};
         min-height: ${(p) => p.theme.spacing.l};

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

@@ -3,15 +3,17 @@ import React from "react";
 import * as S from "./style";
 
 const FieldGroup = (props: IFieldsGroupProps): React.ReactElement => {
-	const { title, children, collapsed } = props;
+	const { title, children, collapsed, solid } = props;
 	const [isOpen, setIsOpen] = React.useState(!collapsed);
 
 	const handleClick = () => {
 		setIsOpen(!isOpen);
 	};
 
+	const className = solid ? "filled" : "";
+
 	return (
-		<S.Wrapper data-testid="field-group-wrapper">
+		<S.Wrapper data-testid="field-group-wrapper" className={className} isOpen={isOpen}>
 			<S.Label data-testid="field-group-label" onClick={handleClick} isOpen={isOpen}>
 				{title}
 			</S.Label>
@@ -28,4 +30,5 @@ interface IFieldsGroupProps {
 	title: string;
 	children: any;
 	collapsed?: boolean;
+	solid?: boolean;
 }

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

@@ -1,10 +1,6 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div`
-  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
-`;
-
-export const Label = styled.div<{ isOpen: boolean }>`
+const Label = styled.div<{ isOpen: boolean }>`
   position: relative;
   ${(p) => p.theme.textStyle.headingXXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
@@ -25,8 +21,37 @@ export const Label = styled.div<{ isOpen: boolean }>`
   }
 `;
 
-export const Content = styled.div<{ isOpen: boolean }>`
+const Content = styled.div<{ isOpen: boolean }>`
   overflow-y: ${(p) => (p.isOpen ? "visible" : "hidden")};
-  max-height: ${(p) => (p.isOpen ? `auto` : 0)};
+  max-height: ${(p) => (p.isOpen ? "auto" : 0)};
   transition: all 0.5s ease-in-out;
 `;
+
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+
+  &.filled {
+    margin: ${(p) => `${p.theme.spacing.xs} 0`};
+    background-color: ${(p) => p.theme.colors.uiBackground02};
+    border: 1px solid ${(p) => (p.isOpen ? p.theme.color.interactive01 : p.theme.color.uiLine)};
+    border-radius: ${(p) => p.theme.radii.s};
+    padding: ${(p) => p.theme.spacing.s};
+
+    ${Label} {
+      ${(p) => (p.isOpen ? p.theme.textStyle.uiL : p.theme.textStyle.fieldContent)};
+      text-transform: none;
+      letter-spacing: normal;
+      color: ${(p) => p.theme.colors.textHighEmphasis};
+      border-bottom: none;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    ${Content} {
+      padding-top: ${(p) => p.theme.spacing.s};
+      display: ${(p) => (p.isOpen ? "block" : "none")};
+    }
+  }
+`;
+
+export { Wrapper, Label, Content };

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

@@ -1,35 +1,40 @@
-import React, { memo } from "react";
-import { IHeadingField, ISite } from "@ax/types";
+import { memo, useCallback } from "react";
+
 import { FieldsBehavior, TextField, Wysiwyg } from "@ax/components";
+import type { IHeadingField, ISelectOption, ISite } from "@ax/types";
 
 import * as S from "./style";
 
 const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
-	const { value, onChange, options, showAdvanced, toolbar = false } = props;
+	const { value, onChange, options, showAdvanced, default: defaultValue, toolbar = false, title, site } = props;
 
-	const getContentValue = () => value?.content || props.default?.content || "";
-	const getTagValue = () => value?.tag || props.default?.tag || "";
+	const contentValue = value?.content ?? defaultValue?.content ?? "";
+	const tagValue = value?.tag ?? defaultValue?.tag ?? "";
 
-	const handleChange = (newValue: string) => {
-		const tag = getTagValue();
-		onChange({ content: newValue, tag });
-	};
+	const handleChange = useCallback(
+		(newValue: string) => {
+			onChange({ content: newValue, tag: tagValue });
+		},
+		[onChange, tagValue],
+	);
 
-	const handleSelectChange = (newValue: string) => {
-		const content = getContentValue();
-		onChange({ content, tag: newValue });
-	};
+	const handleSelectChange = useCallback(
+		(newValue: string) => {
+			onChange({ content: contentValue, tag: newValue });
+		},
+		[onChange, contentValue],
+	);
 
 	return (
 		<>
 			{toolbar ? (
-				<Wysiwyg {...props} inline={true} value={getContentValue()} onChange={handleChange} />
+				<Wysiwyg title={title} site={site} inline={true} value={contentValue} onChange={handleChange} />
 			) : (
-				<TextField {...props} value={getContentValue()} onChange={handleChange} />
+				<TextField value={contentValue} onChange={handleChange} />
 			)}
 			{showAdvanced && (
 				<S.AdvancedWrapper data-testid="text-field-advanced-wrapper">
-					<FieldsBehavior fieldType="Select" options={options} value={getTagValue()} onChange={handleSelectChange} />
+					<FieldsBehavior fieldType="Select" options={options} value={tagValue} onChange={handleSelectChange} />
 				</S.AdvancedWrapper>
 			)}
 		</>
@@ -40,16 +45,11 @@ interface IHeadingFieldProps {
 	value: IHeadingField;
 	title: string;
 	onChange: (value: IHeadingField) => void;
-	options: IOption[];
+	options: ISelectOption[];
 	showAdvanced: boolean;
 	default: IHeadingField;
 	site: ISite;
 	toolbar?: boolean;
 }
 
-interface IOption {
-	value: string;
-	label: string;
-}
-
 export default memo(HeadingField);

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { IStyledProps } from "@ax/types";
+import type { IStyledProps } from "@ax/types";
 
 const Wrapper = styled.button<{ disabled?: boolean }>`
   ${(p: IStyledProps) => p.theme.textStyle.fieldLabel};

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

@@ -1,15 +1,18 @@
-import React, { memo, useState, useEffect } from "react";
+import { memo, useState, useEffect } from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
-const NumberField = (props: INumberFieldProps): JSX.Element => {
+const NumberField = (props: INumberFieldProps) => {
 	const { name, value, error, onChange, onBlur, maxValue, minValue, disabled, handleValidation, min, max } = props;
 
 	const strValue = value || value === 0 ? value.toString() : "";
 	const safeMax = typeof max !== "undefined" ? max : maxValue;
 	const safeMin = typeof min !== "undefined" ? min : minValue;
 
+	let validators: Record<string, unknown> = safeMax !== undefined ? { maxValue: safeMax } : {};
+	validators = safeMin !== undefined ? { ...validators, minValue: safeMin } : validators;
+
 	const [inputValue, setInputValue] = useState(strValue);
 
 	useEffect(() => {
@@ -17,18 +20,18 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 	}, [strValue]);
 
 	const setValue = (value: string, eventType: string) => {
-		const floatValue = value || value === "0" ? parseFloat(value) : undefined;
+		const floatValue = value.length > 0 ? parseFloat(value) : undefined;
 		setInputValue(value);
 
-		eventType === "blur" ? onBlur && onBlur(floatValue) : onChange(floatValue);
+		eventType === "blur" ? onBlur?.(floatValue) : onChange(floatValue);
 	};
 
 	const handleClick = (pressedKey: string) => {
 		const currentValue = parseFloat(inputValue);
 
-		let updatedValue = currentValue ? currentValue : 0;
-		const isMin = updatedValue === safeMin;
-		const isMax = updatedValue === safeMax;
+		let updatedValue = !Number.isNaN(currentValue) ? currentValue : 0;
+		const isMin = safeMin !== undefined && updatedValue === safeMin;
+		const isMax = safeMax !== undefined && updatedValue === safeMax;
 
 		if (pressedKey === "ArrowUp" && !isMax) {
 			updatedValue++;
@@ -38,20 +41,17 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 
 		setInputValue(updatedValue.toString());
 		onChange(updatedValue);
-		handleValidation && handleValidation(updatedValue.toString(), validators);
+		handleValidation?.(updatedValue.toString(), validators);
 	};
 
-	let validators: Record<string, unknown> = safeMax ? { maxValue: safeMax } : {};
-	validators = safeMin ? { ...validators, minValue: safeMin } : validators;
-
 	const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
 		setValue(e.target.value, e.type);
-		handleValidation && handleValidation(e.target.value, validators);
+		handleValidation?.(e.target.value, validators);
 	};
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setValue(e.target.value, e.type);
-		error && handleValidation && handleValidation(e.target.value, validators);
+		error && handleValidation?.(e.target.value, validators);
 	};
 
 	const increaseValue = () => handleClick("ArrowUp");
@@ -72,10 +72,10 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 				data-testid="input"
 			/>
 			<S.QuantityNav error={error} disabled={disabled}>
-				<S.ArrowUp onClick={increaseValue} data-testid="arrow-up">
+				<S.ArrowUp onClick={disabled ? undefined : increaseValue} data-testid="arrow-up">
 					<Icon name="UpArrow" />
 				</S.ArrowUp>
-				<S.ArrowDown onClick={decreaseValue} data-testid="arrow-down">
+				<S.ArrowDown onClick={disabled ? undefined : decreaseValue} data-testid="arrow-down">
 					<Icon name="DownArrow" />
 				</S.ArrowDown>
 			</S.QuantityNav>
@@ -92,7 +92,6 @@ export interface INumberFieldProps {
 	maxValue?: number; // to deprecate
 	min?: number;
 	max?: number;
-	onClickIcon?: () => void;
 	onBlur?: (value: number | null | undefined) => void;
 	disabled?: boolean;
 	handleValidation?: (value: string, validators: Record<string, unknown>) => void;

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

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
 const QuantityButton = styled.div`
+  display: flex;
+  justify-content: center;
   background-color: ${(p) => p.theme.color.uiBackground03};
   position: absolute;
   cursor: pointer;

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

@@ -91,7 +91,7 @@ const ReferenceField = (props: IReferenceFieldProps) => {
 			if (isReqOk(response?.status)) {
 				return response.data;
 			} else {
-				console.log("Error en getSourcesTitles");
+				console.error("Error en getSourcesTitles");
 				return [];
 			}
 		};

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

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

@@ -0,0 +1,24 @@
+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/Fields/Select/index.tsx

@@ -19,11 +19,12 @@ const Select = (props: ISelectProps): JSX.Element => {
 		onChange,
 		alignRight,
 		maxWidth,
+		offSet,
 	} = props;
 
 	const className = error ? `react-select-error ${type}` : type;
 	const emptyOption = { value: "", label: placeholder || "Empty" };
-	const isSearchable = !(type === "inline" || type === "mini");
+	const isSearchable = !(type === "inline" || type === "mini" || type === "round");
 
 	const [hasEmptyOption, setHasEmptyOption] = useState(!mandatory);
 	const [inputText, setInputText] = useState<string>("");
@@ -90,6 +91,7 @@ const Select = (props: ISelectProps): JSX.Element => {
 				inputValue={inputText}
 				components={{ Menu }}
 				onKeyDown={handleKeyDown}
+				offSet={offSet}
 			/>
 		</div>
 	);
@@ -109,11 +111,13 @@ export interface ISelectProps {
 	alignRight?: boolean;
 	onChange: (value: string) => void;
 	maxWidth?: number;
+	offSet?: string;
 }
 
 interface IOptionProps {
 	value: string;
 	label: string;
+	isDisabled?: boolean;
 }
 
 export default Select;

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

@@ -6,6 +6,7 @@ export const StyledSelect = styled(Select)<{
 	error: boolean | undefined;
 	alignRight: boolean | undefined;
 	maxWidth?: number;
+	offSet?: string;
 }>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
@@ -56,12 +57,25 @@ export const StyledSelect = styled(Select)<{
     max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     margin-top: 0;
     z-index: 99;
+
     .react-select__menu-list {
       border: 1px solid ${(p) => p.theme.color.uiLine};
       border-radius: 4px;
       max-height: calc(${(p) => p.theme.spacing.l} * 3);
       overflow: auto;
       padding: 0;
+
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 4px;
+        height: 100%;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: ${(p) => p.theme.colors.iconNonActive};
+      }
+
       .react-select__option {
         background-color: ${(p) => p.theme.color.interactiveBackground};
         min-height: ${(p) => p.theme.spacing.l};
@@ -200,4 +214,46 @@ export const StyledSelect = styled(Select)<{
       }
     }
   }
+
+  &.round {
+    ${(p) => p.theme.textStyle.uiXS};
+    margin-bottom: 0;
+
+    .react-select__control {
+      height: 24px;
+      min-height: 24px;
+      border-radius: 10px;
+      border: none;
+      padding-left: ${(p) => p.theme.spacing.xs};
+
+      .react-select__value-container {
+        padding: 0;
+      }
+
+      .react-select__indicator {
+        padding: 0 4px;
+        svg {
+          width: ${(p) => p.theme.spacing.s};
+          height: ${(p) => p.theme.spacing.s};
+        }
+      }
+    }
+
+    .react-select__menu {
+      min-width: 80px;
+      width: fit-content;
+      left: ${(p) => (p.offSet ? p.offSet : "50%")};
+      transform: translateX(-50%);
+      margin-top: ${(p) => p.theme.spacing.xxs};
+
+      .react-select__option {
+        ${(p) => p.theme.textStyle.uiM};
+        padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+        min-height: auto;
+        text-align: center;
+        white-space: nowrap;
+      }
+    }
+
+  }
 `;