@griddo/ax 11.11.8-rc.0 → 11.11.8

package/src/components/Browser/style.tsx

@@ -1,15 +1,9 @@
-import { FloatingNote } from "@ax/components";
-
 import styled, { css } from "styled-components";
 
-const BrowserWrapper = styled.div<{ scaledWidth?: number; isPreview?: boolean }>`
+const BrowserWrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBackground01};
-  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;
+  height: 100%;
+  width: 100%;
 `;
 
 const NavBar = styled.div`
@@ -28,9 +22,6 @@ 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`
@@ -68,14 +59,8 @@ 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;
-  flex: 1;
-  min-height: 0;
-  padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
-`;
-
-const OuterContainer = styled.div`
-  width: 100%;
   height: 100%;
+  padding: ${(p) => (p.isFormEditor ? p.theme.spacing.m : "0")};
 `;
 
 const Wrapper = styled.div`
@@ -84,8 +69,7 @@ const Wrapper = styled.div`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   overflow: auto;
   scroll-behavior: smooth;
-  flex: 1;
-  min-height: 0;
+  height: 100%;
   position: relative;
 
   .headroom {
@@ -93,57 +77,4 @@ const Wrapper = styled.div`
   }
 `;
 
-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,
-};
+export { BrowserWrapper, FrameWrapper, IconWrapper, NavActions, NavBar, NavUrl, Wrapper };

package/src/components/BrowserContent/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { PageInfoBanner } from "@ax/components";
+import { OcassionalToast } from "@ax/components";
 import { formatDate } from "@ax/helpers";
 import type { ILanguage, ISocialState } from "@ax/types";
 
@@ -59,7 +59,7 @@ const BrowserContent = (props: IProps) => {
 			selectHoverEditorID={selectHoverEditorID}
 		>
 			{renderer === "sharedPage" && showBanner && (
-				<PageInfoBanner
+				<OcassionalToast
 					message={`This draft link expires on ${shareEndDate ? formatDate(new Date(shareEndDate)) : "..."}`}
 					icon="scheduled"
 					onDismiss={() => setShowBanner(false)}

package/src/components/Button/index.tsx

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

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

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

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

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

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

@@ -1,6 +1,10 @@
 import styled from "styled-components";
 
-const Label = styled.div<{ isOpen: boolean }>`
+export const Wrapper = styled.div`
+  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+`;
+
+export const Label = styled.div<{ isOpen: boolean }>`
   position: relative;
   ${(p) => p.theme.textStyle.headingXXS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
@@ -21,37 +25,8 @@ const Label = styled.div<{ isOpen: boolean }>`
   }
 `;
 
-const Content = styled.div<{ isOpen: boolean }>`
+export 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,5 +1,5 @@
-import { memo } from "react";
-import type { IHeadingField, ISite } from "@ax/types";
+import React, { memo } from "react";
+import { IHeadingField, ISite } from "@ax/types";
 import { FieldsBehavior, TextField, Wysiwyg } from "@ax/components";
 
 import * as S from "./style";

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

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

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

@@ -1,18 +1,15 @@
-import { memo, useState, useEffect } from "react";
+import React, { memo, useState, useEffect } from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
-const NumberField = (props: INumberFieldProps) => {
+const NumberField = (props: INumberFieldProps): JSX.Element => {
 	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(() => {
@@ -20,18 +17,18 @@ const NumberField = (props: INumberFieldProps) => {
 	}, [strValue]);
 
 	const setValue = (value: string, eventType: string) => {
-		const floatValue = value.length > 0 ? parseFloat(value) : undefined;
+		const floatValue = value || value === "0" ? parseFloat(value) : undefined;
 		setInputValue(value);
 
-		eventType === "blur" ? onBlur?.(floatValue) : onChange(floatValue);
+		eventType === "blur" ? onBlur && onBlur(floatValue) : onChange(floatValue);
 	};
 
 	const handleClick = (pressedKey: string) => {
 		const currentValue = parseFloat(inputValue);
 
-		let updatedValue = !Number.isNaN(currentValue) ? currentValue : 0;
-		const isMin = safeMin !== undefined && updatedValue === safeMin;
-		const isMax = safeMax !== undefined && updatedValue === safeMax;
+		let updatedValue = currentValue ? currentValue : 0;
+		const isMin = updatedValue === safeMin;
+		const isMax = updatedValue === safeMax;
 
 		if (pressedKey === "ArrowUp" && !isMax) {
 			updatedValue++;
@@ -41,17 +38,20 @@ const NumberField = (props: INumberFieldProps) => {
 
 		setInputValue(updatedValue.toString());
 		onChange(updatedValue);
-		handleValidation?.(updatedValue.toString(), validators);
+		handleValidation && 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?.(e.target.value, validators);
+		handleValidation && handleValidation(e.target.value, validators);
 	};
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		setValue(e.target.value, e.type);
-		error && handleValidation?.(e.target.value, validators);
+		error && handleValidation && handleValidation(e.target.value, validators);
 	};
 
 	const increaseValue = () => handleClick("ArrowUp");
@@ -72,10 +72,10 @@ const NumberField = (props: INumberFieldProps) => {
 				data-testid="input"
 			/>
 			<S.QuantityNav error={error} disabled={disabled}>
-				<S.ArrowUp onClick={disabled ? undefined : increaseValue} data-testid="arrow-up">
+				<S.ArrowUp onClick={increaseValue} data-testid="arrow-up">
 					<Icon name="UpArrow" />
 				</S.ArrowUp>
-				<S.ArrowDown onClick={disabled ? undefined : decreaseValue} data-testid="arrow-down">
+				<S.ArrowDown onClick={decreaseValue} data-testid="arrow-down">
 					<Icon name="DownArrow" />
 				</S.ArrowDown>
 			</S.QuantityNav>
@@ -92,6 +92,7 @@ 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,8 +1,6 @@
 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.error("Error en getSourcesTitles");
+				console.log("Error en getSourcesTitles");
 				return [];
 			}
 		};

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

@@ -19,12 +19,11 @@ 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" || type === "round");
+	const isSearchable = !(type === "inline" || type === "mini");
 
 	const [hasEmptyOption, setHasEmptyOption] = useState(!mandatory);
 	const [inputText, setInputText] = useState<string>("");
@@ -91,7 +90,6 @@ const Select = (props: ISelectProps): JSX.Element => {
 				inputValue={inputText}
 				components={{ Menu }}
 				onKeyDown={handleKeyDown}
-				offSet={offSet}
 			/>
 		</div>
 	);
@@ -111,13 +109,11 @@ 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,7 +6,6 @@ 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};
@@ -57,25 +56,12 @@ 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};
@@ -214,46 +200,4 @@ 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;
-      }
-    }
-
-  }
 `;

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

@@ -1,13 +1,12 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
-
-import type { IRootState } from "@ax/types";
+import { IRootState } from "@ax/types";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import * as S from "./style";
 
 const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
-	const { autoSummary, getPageSummary, disabled, description, className } = props;
+	const { autoSummary, getPageSummary, disabled } = props;
 
 	const initialState = {
 		isLoading: false,
@@ -28,15 +27,6 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
 		}
 	};
 
-	const descriptionText = description ? (
-		description
-	) : (
-		<>
-			You can automatically generate <strong>SEO meta descriptions</strong> and <strong>keywords</strong> quickly with{" "}
-			<strong>AI</strong>.
-		</>
-	);
-
 	const buttonText = state.isLoading
 		? "Processing..."
 		: state.isClicked
@@ -46,8 +36,11 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
 	return (
 		<>
 			{autoSummary ? (
-				<S.Wrapper data-testid="summary-button-wrapper" className={className}>
-					<S.Text>{descriptionText}</S.Text>
+				<S.Wrapper data-testid="summary-button-wrapper">
+					<S.Text>
+						You can automatically generate <strong>SEO meta descriptions</strong> and <strong>keywords</strong> quickly
+						with <strong>AI</strong>.
+					</S.Text>
 					<S.ButtonWrapper>
 						<S.StyledButton
 							type="button"
@@ -70,9 +63,7 @@ const SummaryButton = (props: ISummaryButtonProps): JSX.Element => {
 
 export interface ISummaryButtonProps {
 	autoSummary: boolean;
-	disabled?: boolean;
-	description?: React.ReactNode;
-	className?: string;
+	disabled: boolean;
 	getPageSummary: () => Promise<boolean>;
 }
 

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

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import { Button } from "@ax/components";
 
@@ -20,7 +21,7 @@ const ButtonWrapper = styled.div`
 
 const StyledButton = styled((props) => <Button {...props} />)`
   width: 100%;
-  max-width: 286px;
+  max-width: 264px;
 `;
 
 const ErrorText = styled.div`

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

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