@griddo/ax 11.14.4-rc.0 → 11.14.5-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.14.4-rc.0",
+	"version": "11.14.5-rc.0",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "707e91a5d107d7127af7c1ce6514b88b790dc718"
+	"gitHead": "35106a4e094a9b210ac358d51ad5a2d80dbc6a2d"
 }

package/src/api/sites.tsx

@@ -1,5 +1,5 @@
 import type { AxiosResponse } from "axios";
-import type { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams } from "@ax/types";
+import type { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams, ISite } from "@ax/types";
 import { template } from "./config";
 import { sendRequest, type IServiceConfig, sendInitialRequest } from "./utils";
 
@@ -340,7 +340,7 @@ const deleteSite = async (siteID: number) => {
 
 const createSite = async (data: any) => sendRequest(SERVICES.CREATE_SITE, { ...data });
 
-const updateSite = (siteID: number, data: any) => {
+const updateSite = (siteID: number, data: ISite) => {
 	const {
 		host,
 		endpoint: [prefix, suffix],

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

@@ -1,4 +1,4 @@
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 
 import { FieldsBehavior, Gallery, Icon, IconAction, Image, ImageDragAndDrop, Modal } from "@ax/components";
 import { formatBytes, getFormattedDateWithTimezone } from "@ax/helpers";
@@ -21,15 +21,18 @@ const ImageField = (props: IImageFieldProps) => {
 		cropPreview = false,
 		fullWidth = false,
 		noGallery = false,
+		selectPosition = true,
+		previewHeight,
+		previewWidth,
+		objectFit = "cover",
 	} = props;
 
 	const isLinkableImage = selectedContent && selectedContent.component === "LinkableImage";
 	const hasImage = value && Object.prototype.hasOwnProperty.call(value, "url");
 	const isModalOpen = isLinkableImage && !hasImage;
-	const { isOpen, toggleModal } = useModal(isModalOpen);
-	const { isOpen: isOpenDD, toggleModal: toggleModalDD } = useModal(isModalOpen);
+	const { isOpen, toggleModal } = useModal(isModalOpen && !noGallery);
+	const { isOpen: isOpenDD, toggleModal: toggleModalDD } = useModal(isModalOpen && noGallery);
 	const [previewSrc, setPreviewSrc] = useState<string>();
-	const previewRef = useRef<HTMLDivElement>(null);
 
 	const imageUrl = value ? (typeof value === "string" ? value : value.url) : "";
 	const imagePosition = value && typeof value === "object" ? value.position : "center";
@@ -56,17 +59,20 @@ const ImageField = (props: IImageFieldProps) => {
 		}
 	};
 
+	const openImageSelector = () => {
+		setIsGalleryOpened?.();
+		noGallery ? toggleModalDD() : toggleModal();
+	};
+
 	const handleClick = () => {
 		if (!disabled) {
-			setIsGalleryOpened?.();
-			noGallery ? toggleModalDD() : toggleModal();
+			openImageSelector();
 		}
 	};
 
 	const handleChange = () => {
 		if (!disabled) {
-			setIsGalleryOpened?.();
-			noGallery ? toggleModalDD() : toggleModal();
+			openImageSelector();
 		}
 	};
 
@@ -87,7 +93,10 @@ const ImageField = (props: IImageFieldProps) => {
 
 	const handleUpload = (file: IImage[]) => getImageSelected(file[0]);
 
-	const imageElement = useMemo(() => <Image url={previewSrc} width="320" />, [previewSrc]);
+	const imageElement = useMemo(
+		() => <Image url={previewSrc} width={previewWidth ? previewWidth.toString() : "320"} />,
+		[previewSrc, previewWidth],
+	);
 
 	return (
 		<>
@@ -114,25 +123,36 @@ const ImageField = (props: IImageFieldProps) => {
 					</S.ImageData>
 				</S.ImageDataWrapper>
 			)}
-			<S.Preview preview={!!previewSrc} data-testid="previewDiv" ref={previewRef}>
-				{previewSrc && <S.ImageContainer cropPreview={cropPreview}>{imageElement}</S.ImageContainer>}
-				<S.PositionWrapper>
-					<S.PositionTitle>
-						<Icon name="grid" size="16" />
-						<span>POSITION</span>
-					</S.PositionTitle>
-					<S.PositionGrid>
-						<S.Position onClick={handlePosition("left-top")} active={imagePosition === "left-top"} />
-						<S.Position onClick={handlePosition("top")} active={imagePosition === "top"} />
-						<S.Position onClick={handlePosition("right-top")} active={imagePosition === "right-top"} />
-						<S.Position onClick={handlePosition("left")} active={imagePosition === "left"} />
-						<S.Position onClick={handlePosition("center")} active={!imagePosition || imagePosition === "center"} />
-						<S.Position onClick={handlePosition("right")} active={imagePosition === "right"} />
-						<S.Position onClick={handlePosition("left-bottom")} active={imagePosition === "left-bottom"} />
-						<S.Position onClick={handlePosition("bottom")} active={imagePosition === "bottom"} />
-						<S.Position onClick={handlePosition("right-bottom")} active={imagePosition === "right-bottom"} />
-					</S.PositionGrid>
-				</S.PositionWrapper>
+			<S.Preview
+				preview={!!previewSrc}
+				data-testid="previewDiv"
+				customPreviewHeight={previewHeight}
+				customPreviewWidth={previewWidth}
+			>
+				{previewSrc && (
+					<S.ImageContainer objectFit={cropPreview ? "cover" : objectFit} cropPreview={cropPreview}>
+						{imageElement}
+					</S.ImageContainer>
+				)}
+				{selectPosition && (
+					<S.PositionWrapper>
+						<S.PositionTitle>
+							<Icon name="grid" size="16" />
+							<span>POSITION</span>
+						</S.PositionTitle>
+						<S.PositionGrid>
+							<S.Position onClick={handlePosition("left-top")} active={imagePosition === "left-top"} />
+							<S.Position onClick={handlePosition("top")} active={imagePosition === "top"} />
+							<S.Position onClick={handlePosition("right-top")} active={imagePosition === "right-top"} />
+							<S.Position onClick={handlePosition("left")} active={imagePosition === "left"} />
+							<S.Position onClick={handlePosition("center")} active={!imagePosition || imagePosition === "center"} />
+							<S.Position onClick={handlePosition("right")} active={imagePosition === "right"} />
+							<S.Position onClick={handlePosition("left-bottom")} active={imagePosition === "left-bottom"} />
+							<S.Position onClick={handlePosition("bottom")} active={imagePosition === "bottom"} />
+							<S.Position onClick={handlePosition("right-bottom")} active={imagePosition === "right-bottom"} />
+						</S.PositionGrid>
+					</S.PositionWrapper>
+				)}
 				<S.PreviewActions>
 					<IconAction icon="change" onClick={handleChange} />
 					<IconAction icon="delete" onClick={handleDelete} />
@@ -177,6 +197,10 @@ export interface IImageFieldProps {
 	cropPreview?: boolean;
 	fullWidth?: boolean;
 	noGallery?: boolean;
+	selectPosition?: boolean;
+	previewHeight?: number;
+	previewWidth?: number;
+	objectFit?: "contain" | "cover";
 }
 
 export default memo(ImageField);

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

@@ -110,14 +110,22 @@ const PositionWrapper = styled.div`
   }
 `;
 
-const Preview = styled.div<{ preview: boolean }>`
+const Preview = styled.div<{
+	preview: boolean;
+	customPreviewHeight?: number;
+	customPreviewWidth?: number;
+	computedImageHeight?: string | number;
+}>`
   position: relative;
-  min-height: ${(p) => `calc(${p.theme.spacing.l} * 2)`};
-  max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
-  width: 100%;
+  min-height: ${(p) => p.customPreviewHeight || (p.computedImageHeight ? p.computedImageHeight : `calc(${p.theme.spacing.l} * 2)`)};
+  max-width: ${(p) => (p.customPreviewWidth ? "none" : `calc(${p.theme.spacing.xl} * 5)`)};
+  height: ${(p) => `${p.customPreviewHeight}px`};
+  width: ${(p) => `${p.customPreviewWidth}px` || "100%"};
   border: 1px solid ${(p) => p.theme.colors.uiLine};
   border-radius: 4px;
-  display: ${(p) => (p.preview ? `block` : `none`)};
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  display: ${(p) => (p.preview ? `flex` : `none`)};
+  flex-direction: column;
   overflow: hidden;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   :hover {
@@ -143,21 +151,22 @@ const ImageDataWrapper = styled.div`
   max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
 `;
 
-const ImageContainer = styled.div<{ cropPreview?: boolean }>`
+const ImageContainer = styled.div<{ objectFit: "contain" | "cover"; cropPreview?: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
-  ${(p) => (p.cropPreview ? "height: 180px;" : "min-height: 180px;")}
+  flex: 1;
   width: 100%;
+  ${(p) => (p.cropPreview ? "height: 180px;" : "min-height: 180px;")}
   overflow: hidden;
 
-  img {
-    object-fit: ${(p) => (p.cropPreview ? "cover" : "contain")};
-    object-position: center;
-    max-width: 100%;
-    height: 100%;
+  img,
+  picture,
+  svg {
+    display: block;
     width: 100%;
-  }
+    height: 100%;
+    object-fit: ${(p) => p.objectFit};
 `;
 
 const FileName = styled.div`

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

@@ -1,5 +1,3 @@
-import React from "react";
-
 import * as S from "./style";
 
 const NoteField = (props: INoteFieldProps): JSX.Element => {
@@ -15,7 +13,7 @@ const NoteField = (props: INoteFieldProps): JSX.Element => {
 };
 
 export interface INoteFieldProps {
-	value: { title?: string; text: string | JSX.Element };
+	value: { title?: string; text: React.ReactNode };
 	className?: string;
 }
 

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

@@ -15,6 +15,7 @@ const Title = styled.div`
 const Text = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
+  white-space: pre-wrap;
 `;
 
 export { Wrapper, Title, Text };

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

@@ -1,7 +1,8 @@
-import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
 
-export const TextArea = styled(TextareaAutosize)<{ $error: boolean | undefined }>`
+import styled from "styled-components";
+
+const TextArea = styled(TextareaAutosize)<{ $error: boolean | undefined }>`
   ${(p) => p.theme.textStyle.fieldContent};
   border: 1px solid ${(p) => (p.$error === true ? p.theme.color.error : p.theme.color.uiLine)};
   border-radius: 4px;
@@ -29,3 +30,5 @@ export const TextArea = styled(TextareaAutosize)<{ $error: boolean | undefined }
     border-color: ${(p) => p.theme.color.interactiveDisabled};
   }
 `;
+
+export { TextArea };

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

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import * as S from "./style";
 
 const ToggleField = (props: IToggleFieldProps): JSX.Element => {
-	const { name, value, disabled, onChange, size = "m", background = false, auxText } = props;
+	const { name, value, disabled, onChange, size = "m", background = false, auxText, className } = props;
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const isChecked = e.target.checked;
@@ -15,7 +15,7 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
 	const id = useMemo(() => Math.random().toString(), []);
 
 	return (
-		<S.Wrapper background={background} data-testid="toggle-field-wrapper">
+		<S.Wrapper background={background} className={className} data-testid="toggle-field-wrapper">
 			<S.Input
 				id={`toggle-${id}`}
 				type="checkbox"
@@ -40,6 +40,7 @@ export interface IToggleFieldProps {
 	size?: "s" | "m";
 	background?: boolean;
 	auxText?: string;
+	className?: string;
 }
 
 export default ToggleField;

package/src/components/FieldsBehavior/index.tsx

@@ -1,12 +1,13 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-import { isEmptyContainer, getFieldByPath } from "@ax/helpers";
 import { IconAction, Tooltip } from "@ax/components";
 import { getValidity } from "@ax/forms";
+import { getFieldByPath, isEmptyContainer } from "@ax/helpers";
+import type { IErrorItem } from "@ax/types";
 
 import * as S from "./style";
 
-const FieldsBehavior = (props: any): JSX.Element => {
+const FieldsBehavior = (props: IFieldsBehaviorProps): JSX.Element => {
 	const {
 		value,
 		fieldType,
@@ -123,4 +124,27 @@ const FieldsBehavior = (props: any): JSX.Element => {
 	);
 };
 
+interface IFieldsBehaviorProps {
+	value: any;
+	fieldType: string;
+	title?: string;
+	name?: string;
+	helptext?: string;
+	hideable?: boolean;
+	hideField?: () => void;
+	advanced?: boolean;
+	className?: string;
+	whiteList?: string[];
+	mandatory?: boolean;
+	disabled?: boolean;
+	filled?: boolean;
+	validators?: Record<string, unknown>;
+	error?: any; // TODO add type IErrorItem?
+	deleteError?: (error: IErrorItem) => void;
+	editorID?: string | number;
+	objKey?: string | number;
+	inversed?: boolean;
+	[key: string]: unknown;
+}
+
 export default FieldsBehavior;

package/src/components/FieldsBehavior/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Label = styled.label<{ error: boolean | undefined; inversed: boolean }>`
+const Label = styled.label<{ error: boolean | undefined; inversed: boolean }>`
   ${(p) => p.theme.textStyle.fieldLabel};
   color: ${(p) =>
 		p.error === true
@@ -12,11 +12,11 @@ export const Label = styled.label<{ error: boolean | undefined; inversed: boolea
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-export const Asterisk = styled.span`
+const Asterisk = styled.span`
   color: ${(p) => p.theme.color.error};
 `;
 
-export const HelpText = styled.div<{ error: boolean | undefined; inversed: boolean }>`
+const HelpText = styled.div<{ error: boolean | undefined; inversed: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) =>
 		p.error === true
@@ -26,7 +26,7 @@ export const HelpText = styled.div<{ error: boolean | undefined; inversed: boole
 				: p.theme.color.textMediumEmphasis};
 `;
 
-export const Header = styled.div`
+const Header = styled.div`
   position: absolute;
   left: 0;
   top: 0;
@@ -35,12 +35,12 @@ export const Header = styled.div`
   justify-content: space-between;
 `;
 
-export const Icons = styled.div`
+const Icons = styled.div`
   opacity: 0;
   display: flex;
 `;
 
-export const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
+const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
   position: relative;
   margin-bottom: ${(p) => p.theme.spacing.m};
   padding-top: ${(p) => (p.showTitle ? p.theme.spacing.m : 0)};
@@ -66,7 +66,7 @@ export const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
   }
 `;
 
-export const Content = styled.div<{ error: boolean | undefined; inversed: boolean }>`
+const Content = styled.div<{ error: boolean | undefined; inversed: boolean }>`
   &:focus-within {
     & + div label {
       color: ${(p) =>
@@ -78,3 +78,5 @@ export const Content = styled.div<{ error: boolean | undefined; inversed: boolea
     }
   }
 `;
+
+export { Label, Asterisk, HelpText, Header, Icons, Wrapper, Content };

package/src/components/FloatingNote/index.tsx

@@ -25,7 +25,7 @@ const FloatingNote = (props: IFloatingNoteProps): JSX.Element => {
 };
 
 export interface IFloatingNoteProps {
-	message: string;
+	message: React.ReactNode;
 	icon?: string;
 	className?: string;
 	btnText?: string;

package/src/components/FloatingPanel/style.tsx

@@ -30,6 +30,8 @@ export const Wrapper = styled.section<{
   border: ${(p) => (p.secondary ? `1px solid ${p.theme.colors.uiLine}` : `none`)};
   transform: ${(p) => (p.isOpen ? (p.isOpenedSecond ? `translateX(-384px)` : `translateX(0)`) : `translateX(100%)`)};
   transition: transform 0.5s ease-in-out;
+  display: flex;
+  flex-direction: column;
   body.modal-open:not(&) {
     overflow: hidden;
   }
@@ -46,7 +48,8 @@ export const Wrapper = styled.section<{
 `;
 
 export const Content = styled.div`
-  height: 100%;
+  flex: 1;
+  overflow: hidden;
 `;
 
 export const ButtonWrapper = styled.div`

package/src/components/HeadingsPreviewModal/style.tsx

@@ -5,7 +5,7 @@ import { getHeadColor } from "./utils";
 const Wrapper = styled.div``;
 
 const HeadingsWrapper = styled.div`
-  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 80px ${p.theme.spacing.s}`};
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.s}`};
   overflow-y: auto;
   height: 100%;
   width: 100%;

package/src/components/Icon/components/Party.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+const SvgParty = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5057FF"
+      d="M2 22 7 8l9 9-14 5Zm3.3-3.3 7.05-2.5-4.55-4.55-2.5 7.05Zm9.25-6.15L13.5 11.5l5.6-5.6a2.624 2.624 0 0 1 1.925-.8c.75 0 1.392.267 1.925.8l.6.6-1.05 1.05-.6-.6a1.187 1.187 0 0 0-.875-.35c-.35 0-.642.117-.875.35l-5.6 5.6Zm-4-4L9.5 7.5l.6-.6c.233-.233.35-.517.35-.85 0-.333-.117-.617-.35-.85l-.65-.65L10.5 3.5l.65.65c.533.533.8 1.167.8 1.9 0 .733-.267 1.367-.8 1.9l-.6.6Zm2 2L11.5 9.5l3.6-3.6c.233-.233.35-.525.35-.875s-.117-.642-.35-.875l-1.6-1.6 1.05-1.05 1.6 1.6c.533.533.8 1.175.8 1.925s-.267 1.392-.8 1.925l-3.6 3.6Zm4 4L15.5 13.5l1.6-1.6a2.624 2.624 0 0 1 1.925-.8c.75 0 1.392.267 1.925.8l1.6 1.6-1.05 1.05-1.6-1.6a1.187 1.187 0 0 0-.875-.35c-.35 0-.642.117-.875.35l-1.6 1.6Z"
+    />
+  </svg>
+);
+export default SvgParty;

package/src/components/Icon/svgs/Party.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22L7 8L16 17L2 22ZM5.3 18.7L12.35 16.2L7.8 11.65L5.3 18.7ZM14.55 12.55L13.5 11.5L19.1 5.9C19.6333 5.36667 20.275 5.1 21.025 5.1C21.775 5.1 22.4167 5.36667 22.95 5.9L23.55 6.5L22.5 7.55L21.9 6.95C21.6667 6.71667 21.375 6.6 21.025 6.6C20.675 6.6 20.3833 6.71667 20.15 6.95L14.55 12.55ZM10.55 8.55L9.5 7.5L10.1 6.9C10.3333 6.66667 10.45 6.38333 10.45 6.05C10.45 5.71667 10.3333 5.43333 10.1 5.2L9.45 4.55L10.5 3.5L11.15 4.15C11.6833 4.68333 11.95 5.31667 11.95 6.05C11.95 6.78333 11.6833 7.41667 11.15 7.95L10.55 8.55ZM12.55 10.55L11.5 9.5L15.1 5.9C15.3333 5.66667 15.45 5.375 15.45 5.025C15.45 4.675 15.3333 4.38333 15.1 4.15L13.5 2.55L14.55 1.5L16.15 3.1C16.6833 3.63333 16.95 4.275 16.95 5.025C16.95 5.775 16.6833 6.41667 16.15 6.95L12.55 10.55ZM16.55 14.55L15.5 13.5L17.1 11.9C17.6333 11.3667 18.275 11.1 19.025 11.1C19.775 11.1 20.4167 11.3667 20.95 11.9L22.55 13.5L21.5 14.55L19.9 12.95C19.6667 12.7167 19.375 12.6 19.025 12.6C18.675 12.6 18.3833 12.7167 18.15 12.95L16.55 14.55Z" fill="#5057FF"/>
+</svg>

package/src/components/Image/index.tsx

@@ -28,10 +28,11 @@ const Image = (props: ICloudinaryImageProps | GriddoImageCommonProps) => {
 
 export interface ICloudinaryImageProps {
 	url: string;
-	width: number;
+	width?: number;
 	height?: number;
 	quality?: number;
 	alt?: string;
+	crop?: "cover" | "contain" | "fill" | "inside" | "outside";
 }
 
 export default Image;

package/src/components/Image/utils.ts

@@ -1,4 +1,4 @@
-import { ICloudinaryImageProps } from "./index";
+import type { ICloudinaryImageProps } from "./index";
 
 // The string to split up the cloudinary url
 const CLOUDINARY_SEPARATOR = "image/upload";
@@ -18,7 +18,7 @@ function createCloudinaryUrl({ props, retina = true }: ICreateCloudinaryUrl): st
 	// w_100 for width: 100, etc..
 	// * 2 = full retina
 	const cloudinaryParms = concatCloudinaryParams({
-		w: props.width * (retina ? 2 : 1),
+		w: props.width && props.width * (retina ? 2 : 1),
 		h: props.height && props.height * (retina ? 2 : 1),
 		q: props.quality,
 		c: "fill",
@@ -39,7 +39,7 @@ function concatCloudinaryParams(params: ICloudinaryParams) {
 }
 
 interface ICloudinaryParams {
-	w: number;
+	w?: number;
 	h?: number;
 	q?: number;
 	c: "fill" | "fit";