@griddo/ax 1.69.7 → 1.71.0

package/src/components/Button/index.tsx

@@ -36,7 +36,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     case buttonStyles.TEXT:
       return (
         <S.TextButton
-          data-testid="buttonText"
+          data-testid="button-text"
           className={className}
           type={type}
           disabled={disabled}
@@ -49,7 +49,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     case buttonStyles.INVERSE:
       return (
         <S.LineButton
-          data-testid="buttonLineInverse"
+          data-testid="button-line-inverse"
           className={className}
           type={type}
           disabled={disabled}
@@ -62,7 +62,7 @@ const Button = ({ children, type, disabled, icon, buttonStyle, onClick, classNam
     default:
       return (
         <S.Button
-          data-testid="buttonDefault"
+          data-testid="button-default"
           className={className}
           type={type}
           disabled={disabled}

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -12,9 +12,20 @@ const pageEditorID = 0;
 const Field = (props: IProps) => {
   const { type, defaults, updateEditorContent, selectedContent, theme } = props;
   const { isOpen, toggleModal } = useModal();
+  const isDefault = selectedContent.setAsDefault;
+
+  const options = defaults.filter((component: any) => {
+    const isCurrentType = component.type === type;
+    const isNotSelected = component.id !== selectedContent.id;
+    return isCurrentType && isNotSelected;
+  });
+
+  const hasMultipleOptions: boolean | undefined = options && options.length > 0;
+  let filteredByDefaultOptions = options;
+  if (!isDefault && hasMultipleOptions) {
+    filteredByDefaultOptions = options.filter((component: any) => !component.setAsDefault);
+  }
 
-  const options = defaults.filter((component: any) => component.type === type);
-  const hasMultipleOptions: boolean | undefined = options && options.length > 1;
   const optionsType = `${type}s`;
 
   const actionMenuOptions = [
@@ -52,7 +63,7 @@ const Field = (props: IProps) => {
       {hasMultipleOptions && (
         <SideModal
           optionsType={optionsType}
-          whiteList={options}
+          whiteList={filteredByDefaultOptions}
           handleClick={handleReplace}
           toggleModal={toggleModal}
           isOpen={isOpen}

package/src/components/ElementsTooltip/index.tsx

@@ -3,12 +3,12 @@ import { trimText } from "@ax/helpers";
 
 import * as S from "./style";
 
-const ElementsTooltip = (props: IProps): JSX.Element => {
+const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
   const { elements, maxChar, defaultElements = 1, colors, rounded = false, elementsPerRow = 1 } = props;
 
   if (!elements) return <></>;
 
-  const visibleElements = elements?.slice(0, defaultElements);
+  const visibleElements = elements.slice(0, defaultElements);
   const remainingElements = elements.length - defaultElements;
 
   const elementsRows: string[][] = [];
@@ -16,30 +16,31 @@ const ElementsTooltip = (props: IProps): JSX.Element => {
     const row = Math.floor(idx / elementsPerRow);
     const isNewRow = idx % elementsPerRow === 0;
     elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
-  })
+  });
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="elements-wrapper">
       {visibleElements.map((fullElement, idx) => {
         const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
         const color = colors && colors[element] ? colors[element] : undefined;
+
         return (
-          <S.Element key={idx} color={color} rounded={rounded}>
+          <S.Element data-testid="element" key={idx} color={color} rounded={rounded}>
             {element}
           </S.Element>
         );
       })}
       {remainingElements > 0 && (
-        <S.Element rounded={rounded}>
+        <S.Element data-testid="remaining-element" rounded={rounded}>
           +{remainingElements}
           <S.Tooltip>
             {elementsRows.map((row, idx) => {
               return (
-                <S.Row key={idx}>
+                <S.Row data-testid="row-element" key={idx}>
                   {row.map((element, idx) => {
                     const color = colors && colors[element] ? colors[element] : undefined;
                     return (
-                      <S.Element key={idx} color={color} rounded={rounded}>
+                      <S.Element data-testid="div-element" key={idx} color={color} rounded={rounded}>
                         {element}
                       </S.Element>
                     );
@@ -54,7 +55,7 @@ const ElementsTooltip = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IElementsTooltipProps {
   elements?: string[];
   defaultElements?: number;
   maxChar?: number;

package/src/components/EmptyState/index.tsx

@@ -8,8 +8,8 @@ const EmptyState = (props: IEmptyStateProps) => {
   const { icon, title, message, button, action } = props;
 
   return (
-    <S.Wrapper>
-      <S.IconWrapper>
+    <S.Wrapper data-testid="wrapper">
+      <S.IconWrapper data-testid="icon-wrapper">
         <Icon name={icon || "empty"} size="26" />
       </S.IconWrapper>
       <S.Title>{title || "Oh! This Looks so empty"}</S.Title>

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

@@ -84,7 +84,7 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IProps {
   value: Record<string, unknown>[];
   name: string;
   onChange: (value: Record<string, unknown>[]) => void;

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

@@ -78,7 +78,7 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
   return <S.FieldGroup full={fullHeight}>{checks}</S.FieldGroup>;
 };
 
-interface IAsyncCheckGroup {
+export interface IAsyncCheckGroup {
   value: any[] | null;
   site?: ISite | null;
   source: string;

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

@@ -152,7 +152,7 @@ interface ICheck {
   name: string;
   title: string;
 }
-interface IAsyncSelectProps {
+export interface IAsyncSelectProps {
   name: string;
   value: any;
   entity?: string;

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

@@ -57,9 +57,9 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   let componentID: number = editorID ? editorID : containerOptions.editorID;
 
   const containerInfo: any = !isArray && value && isEmptyContainer(value, hasMultipleOptions);
-  const isEmpty: boolean = containerInfo.isEmpty;
+  const isEmpty: boolean = containerInfo?.isEmpty;
 
-  const currentComponent: any = containerInfo.containedComponent;
+  const currentComponent: any = containerInfo?.containedComponent;
 
   if (currentComponent) {
     containerText = currentComponent.containerText;
@@ -152,17 +152,18 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
         className={`editorId-${editorID}`}
         onClick={handleClick}
         ref={innerRef}
+        data-testid="component-container"
         {...provided?.draggableProps}
       >
-        {isArray && provided && arrayLength > 1 && (
-          <S.HandleWrapper {...provided?.dragHandleProps}>
+        {isArray && provided && (
+          <S.HandleWrapper {...provided?.dragHandleProps} hidden={arrayLength < 2} data-testid="handle-wrapper">
             <S.IconHandleWrapper>
               <Icon name="drag" size="16" />
             </S.IconHandleWrapper>
           </S.HandleWrapper>
         )}
         {containerInfo && !disabled && (
-          <S.IconWrapper>
+          <S.IconWrapper data-testid="icon-wrapper">
             <Icon name={containerText} />
           </S.IconWrapper>
         )}
@@ -195,7 +196,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   );
 };
 
-interface IComponentContainerProps {
+export interface IComponentContainerProps {
   text: string;
   editorID: number;
   whiteList: any[] | undefined;

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

@@ -76,8 +76,8 @@ const ButtonsWrapper = styled.span`
   margin-left: auto;
 `;
 
-const HandleWrapper = styled.div`
-  display: flex;
+const HandleWrapper = styled.div<{ hidden?: boolean }>`
+  display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
 `;
 

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

@@ -19,7 +19,7 @@ const HiddenField = ({ title, showField, hasMultipleOptions }: IHiddenFieldProps
   );
 };
 
-interface IHiddenFieldProps {
+export interface IHiddenFieldProps {
   title: string;
   showField: any;
   hasMultipleOptions?: boolean;

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

@@ -65,17 +65,22 @@ const ImageField = (props: IImageFieldProps) => {
   };
 
   const previewHeight = cropPreview ? { height: 190 } : {};
-
   return (
     <>
-      <S.FieldWrapper error={error} preview={!!previewSrc} disabled={disabled} onClick={handleClick}>
+      <S.FieldWrapper
+        data-testid="fieldWrapper"
+        error={error}
+        preview={!!previewSrc}
+        disabled={disabled}
+        onClick={handleClick}
+      >
         <S.IconWrapper>
           <Icon name="image" size="18" />
         </S.IconWrapper>
         <S.Text>Add image</S.Text>
       </S.FieldWrapper>
       {value && Object.keys(value).length > 1 && typeof value !== "string" && (
-        <S.ImageDataWrapper>
+        <S.ImageDataWrapper data-testid="imageDataWrapper">
           <S.FileName>{value.name}</S.FileName>
           <S.ImageData>
             Uploaded: {!!value.published && getFormattedDateWithTimezone(value.published, "d MMM Y")}
@@ -84,7 +89,7 @@ const ImageField = (props: IImageFieldProps) => {
           </S.ImageData>
         </S.ImageDataWrapper>
       )}
-      <S.Preview preview={!!previewSrc}>
+      <S.Preview preview={!!previewSrc} data-testid="previewDiv">
         {previewSrc && <Image url={previewSrc} width={320} {...previewHeight} />}
         <S.PreviewActions>
           <IconAction icon="change" onClick={handleChange} />
@@ -98,7 +103,7 @@ const ImageField = (props: IImageFieldProps) => {
   );
 };
 
-interface IImageFieldProps {
+export interface IImageFieldProps {
   value: IImage | null | string;
   error?: boolean;
   onChange: (value: any) => void;

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

@@ -6,7 +6,7 @@ import CheckGroup from "@ax/components/Fields/CheckGroup";
 
 import * as S from "./style";
 
-const MultiCheckSelect = (props: IProps) => {
+const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
   const { placeholder, source, value, onChange, site, className, mandatory, options, selectAllOption, floating } =
     props;
 
@@ -35,7 +35,7 @@ const MultiCheckSelect = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IMultiCheckSelectProps {
   value: (string | number)[];
   onChange: (value: string | (string | number)[]) => void;
   site?: ISite | null;
@@ -43,7 +43,7 @@ interface IProps {
   source?: string;
   className?: string;
   mandatory?: boolean;
-  options?: { name: string, value: string, title: string }[];
+  options?: { name: string; value: string; title: string }[];
   selectAllOption?: string;
   floating?: boolean;
 }

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

@@ -37,6 +37,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
 
     setInputValue(updatedValue.toString());
     onChange(updatedValue);
+    handleValidation && handleValidation(updatedValue.toString(), validators);
   };
 
   let validators: Record<string, unknown> = maxValue ? { maxValue } : {};
@@ -81,7 +82,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
   );
 };
 
-interface INumberFieldProps {
+export interface INumberFieldProps {
   value?: number;
   onChange: (value: number) => void;
   name?: string;

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

@@ -46,13 +46,11 @@ const Item = (props: IProps) => {
 
   return (
     <S.Item ref={innerRef} data-testid="reference-field-item" {...provided?.draggableProps}>
-      {listLength > 1 && (
-        <S.HandleWrapper {...provided?.dragHandleProps}>
-          <S.IconHandleWrapper>
-            <Icon name="drag" size="16" />
-          </S.IconHandleWrapper>
-        </S.HandleWrapper>
-      )}
+      <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
+        <S.IconHandleWrapper>
+          <Icon name="drag" size="16" />
+        </S.IconHandleWrapper>
+      </S.HandleWrapper>
       <S.TextWrapper>
         <S.Header>
           <S.Type>{source?.title.toUpperCase()}</S.Type>

package/src/components/Fields/ReferenceField/ItemList/Item/style.tsx

@@ -108,8 +108,8 @@ const ButtonsWrapper = styled.span`
   right: ${(p) => p.theme.spacing.xs};
 `;
 
-const HandleWrapper = styled.div`
-  display: flex;
+const HandleWrapper = styled.div<{ hidden?: boolean }>`
+  display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
   padding-right: ${(p) => p.theme.spacing.xxs};
 `;

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

@@ -98,7 +98,7 @@ const ItemList = (props: IProps) => {
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="referenceList">
             {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
+              <div ref={provided.innerRef} {...provided.droppableProps} data-testid="droppable">
                 <ComponentList components={selectedItems} />
                 {provided.placeholder}
               </div>

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

@@ -10,7 +10,7 @@ import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 import * as S from "./style";
 
 const RichText = (props: IRichTextProps): JSX.Element => {
-  const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false } = props;
+  const { value, error, placeholder, onChange, disabled, editorID, handleValidation, html = false, delayed } = props;
 
   const rawData = html ? htmlToDraft(value || "") : markdownToDraft(value);
   const { contentBlocks, entityMap } = rawData;
@@ -28,15 +28,18 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   }, [editorID]);
 
   useEffect(() => {
-    timeOutRef.current && clearTimeout(timeOutRef.current);
-    timeOutRef.current = setTimeout(() => {
-      delayedChange();
-    }, 300);
+    if (delayed !== false) {
+      timeOutRef.current && clearTimeout(timeOutRef.current);
+      timeOutRef.current = setTimeout(() => {
+        delayedChange();
+      }, 300);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorState]);
 
   const handleOnChange = (editorState: EditorState) => {
     setEditorState(editorState);
+    delayed === false && delayedChange();
   };
 
   const delayedChange = () => {
@@ -106,7 +109,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   );
 };
 
-interface IRichTextProps {
+export interface IRichTextProps {
   editorID: number;
   value: string;
   error?: boolean;
@@ -115,6 +118,7 @@ interface IRichTextProps {
   onChange: (value: string) => void;
   handleValidation?: (value: string) => void;
   html: boolean;
+  delayed?: boolean;
 }
 
 export default memo(RichText);

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

@@ -69,7 +69,7 @@ const Select = (props: ISelectProps): JSX.Element => {
   );
 };
 
-interface ISelectProps {
+export interface ISelectProps {
   name: string;
   value: string;
   options: IOptionProps[];

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

@@ -41,7 +41,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
   );
 };
 
-interface ITextFieldProps {
+export interface ITextFieldProps {
   title: string;
   value: number;
   defaultValue?: number;

package/src/components/Fields/TimeField/HourInput/index.tsx

@@ -0,0 +1,103 @@
+import React, { memo, useEffect, useRef, useState } from "react";
+import { isNumber } from "@ax/helpers";
+import { validateTimeAndCursor } from "./utils";
+
+import * as S from "./style";
+
+const HourInput = (props: IProps) => {
+  const { value, onChange, disabled } = props;
+
+  const [cursorPosition, setCursorPosition] = useState(0);
+  const [count, setCount] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.setSelectionRange(cursorPosition, cursorPosition);
+  }, [count, cursorPosition]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const oldValue = value;
+    const inputEl = e.target;
+    const inputValue = inputEl.value;
+    const position = inputEl.selectionEnd || 0;
+    const isTyped = inputValue.length > oldValue.length;
+    const cursorCharacter = inputValue[position - 1];
+    const addedCharacter = isTyped ? cursorCharacter : null;
+    const removedCharacter = isTyped ? null : oldValue[position];
+    const replacedSingleCharacter = inputValue.length === oldValue.length ? oldValue[position - 1] : null;
+    const colon = ":";
+
+    let newValue = oldValue;
+    let newPosition = position;
+
+    if (addedCharacter !== null) {
+      if (position > 5) {
+        newPosition = 5;
+      } else if (position === 3 && addedCharacter === colon) {
+        newValue = `${inputValue.slice(0, position - 1)}${colon}${inputValue.slice(position + 1)}`;
+      } else if (position === 3 && isNumber(addedCharacter)) {
+        newValue = `${inputValue.slice(0, position - 1)}${colon}${addedCharacter}${inputValue.slice(position + 2)}`;
+        newPosition = position + 1;
+      } else if (isNumber(addedCharacter)) {
+        // user typed a number
+        newValue = inputValue.slice(0, position - 1) + addedCharacter + inputValue.slice(position + 1);
+        if (position === 2) {
+          newPosition = position + 1;
+        }
+      } else {
+        // if user typed NOT a number, then keep old value & position
+        newPosition = position - 1;
+      }
+    } else if (replacedSingleCharacter !== null) {
+      // user replaced only a single character
+      if (isNumber(cursorCharacter)) {
+        if (position - 1 === 2) {
+          newValue = `${inputValue.slice(0, position - 1)}${colon}${inputValue.slice(position)}`;
+        } else {
+          newValue = inputValue;
+        }
+      } else {
+        // user replaced a number on some non-number character
+        newValue = oldValue;
+        newPosition = position - 1;
+      }
+    } else if (typeof cursorCharacter !== "undefined" && cursorCharacter !== colon && !isNumber(cursorCharacter)) {
+      // set of characters replaced by non-number
+      newValue = oldValue;
+      newPosition = position - 1;
+    } else if (removedCharacter !== null) {
+      if (position === 2 && removedCharacter === colon) {
+        newValue = `${inputValue.slice(0, position - 1)}0${colon}${inputValue.slice(position)}`;
+        newPosition = position - 1;
+      } else {
+        // user removed a number
+        newValue = `${inputValue.slice(0, position)}0${inputValue.slice(position)}`;
+      }
+    }
+
+    const [validatedTime, validatedCursorPosition] = validateTimeAndCursor(newValue, oldValue, newPosition);
+
+    setCursorPosition(validatedCursorPosition);
+    setCount(count + 1);
+    onChange(validatedTime);
+  };
+
+  return (
+    <S.InputField
+      type="text"
+      value={value}
+      onChange={handleChange}
+      ref={inputRef}
+      disabled={disabled}
+      data-testid="time-field-input"
+    />
+  );
+};
+
+interface IProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export default memo(HourInput);

package/src/components/Fields/TimeField/HourInput/style.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const InputField = styled.input`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: 50px;
+  border: none;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    color: ${(p) => p.theme.color.interactiveDisabled};
+  }
+`;
+
+export { InputField };

package/src/components/Fields/TimeField/HourInput/utils.tsx

@@ -0,0 +1,35 @@
+const formatTimeItem = (value?: string | number): string => {
+  return `${value || ""}00`.substr(0, 2);
+};
+
+const validateTimeAndCursor = (value = "", defaultValue = "", cursorPosition = 0): [string, number] => {
+  const [oldH, oldM] = defaultValue.split(":");
+
+  let newCursorPosition = Number(cursorPosition);
+  let [newH, newM] = String(value).split(":");
+
+  newH = formatTimeItem(newH);
+  if (Number(newH[0]) > 1) {
+    newH = oldH;
+    newCursorPosition -= 1;
+  } else if (Number(newH[0]) === 1) {
+    if (Number(oldH[0]) === 1 && Number(newH[1]) > 2) {
+      newH = `1${oldH[1]}`;
+      newCursorPosition -= 2;
+    } else if (Number(newH[1]) > 2) {
+      newH = "12";
+    }
+  }
+
+  newM = formatTimeItem(newM);
+  if (Number(newM[0]) > 5) {
+    newM = oldM;
+    newCursorPosition -= 1;
+  }
+
+  const validatedValue = `${newH}:${newM}`;
+
+  return [validatedValue, newCursorPosition];
+};
+
+export { validateTimeAndCursor };

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

@@ -0,0 +1,57 @@
+import React, { memo, useState } from "react";
+import { Select, Icon } from "@ax/components";
+import HourInput from "./HourInput";
+
+import * as S from "./style";
+
+const TimeField = (props: IProps) => {
+  const { value, error, onChange, disabled } = props;
+
+  const safeValue = !value || !value.length ? "00:00 am" : value;
+  const splitValue = safeValue.split(" ");
+  const initValue = { time: splitValue[0], meridian: splitValue[1] };
+  const [state, setState] = useState(initValue);
+
+  const handleChange = (newValue: string) => {
+    setState({ ...state, time: newValue });
+    onChange(`${newValue} ${state.meridian}`);
+  };
+
+  const handleSelectChange = (newValue: string) => {
+    setState({ ...state, meridian: newValue });
+    onChange(`${state.time} ${newValue}`);
+  };
+
+  const selectOptions = [
+    { value: "am", label: "AM" },
+    { value: "pm", label: "PM" },
+  ];
+
+  return (
+    <S.FieldWrapper error={error} data-testid="time-field-wrapper" disabled={disabled}>
+      <HourInput value={state.time} onChange={handleChange} disabled={disabled} />
+      <S.SelectWrapper>
+        <Select
+          name="timeSelect"
+          value={state.meridian}
+          options={selectOptions}
+          onChange={handleSelectChange}
+          type="inline"
+          disabled={disabled}
+        />
+      </S.SelectWrapper>
+      <S.IconWrapper>
+        <Icon name="scheduled" size="24" />
+      </S.IconWrapper>
+    </S.FieldWrapper>
+  );
+};
+
+interface IProps {
+  value?: string;
+  error?: boolean;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export default memo(TimeField);