@griddo/ax 1.69.8 → 1.72.0

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

@@ -78,7 +78,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
   const inputValue = !autoComplete ? state : value || "";
 
   return (
-    <S.FieldWrapper data-testid="textFieldContainer" error={error} className={className}>
+    <S.FieldWrapper data-testid="text-field-container" error={error} className={className}>
       {prefix && <Prefix />}
       <S.Input
         data-testid="inputComponent"
@@ -104,12 +104,7 @@ const TextField = (props: ITextFieldProps): JSX.Element => {
       )}
       {hasButton && (
         <S.IconWrapper data-testid="iconWrapperComponent" readonly={readonly} error={error}>
-          <IconAction            
-            icon={icon || ""}
-            onClick={onClickIcon}
-            disabled={disabled}
-            size="s"
-          />
+          <IconAction icon={icon || ""} onClick={onClickIcon} disabled={disabled} size="s" />
         </S.IconWrapper>
       )}
     </S.FieldWrapper>

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

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

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+const FieldWrapper = styled.div<{ error?: boolean; disabled?: boolean }>`
+  display: flex;
+  height: ${(p) => p.theme.spacing.l};
+  max-width: ${(p) => `calc(8 * ${p.theme.spacing.l})`};
+  min-width: ${(p) => `calc(5 * ${p.theme.spacing.l})`};
+  width: 100%;
+  border: 1px solid
+    ${(p) => (p.error ? p.theme.color.error : p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.uiLine)};
+  border-radius: ${(p) => p.theme.radii.s};
+  background: ${(p) => p.theme.color.uiBackground02};
+  padding: ${(p) => `0 ${p.theme.spacing.s}`};
+  align-items: center;
+
+  &:focus-within {
+    border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.interactive01)};
+  }
+`;
+
+const IconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.m};
+  margin-left: auto;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const SelectWrapper = styled.div`
+  padding-top: 4px;
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+export { FieldWrapper, IconWrapper, SelectWrapper };

package/src/components/Fields/index.tsx

@@ -29,6 +29,7 @@ import SliderField from "./SliderField";
 import TagField from "./TagField";
 import TextArea from "./TextArea";
 import TextField from "./TextField";
+import TimeField from "./TimeField";
 import ToggleField from "./ToggleField";
 import UniqueCheck from "./UniqueCheck";
 import UrlField from "./UrlField";
@@ -68,6 +69,7 @@ export {
   TagField,
   TextArea,
   TextField,
+  TimeField,
   ToggleField,
   UniqueCheck,
   UrlField,

package/src/components/FieldsBehavior/index.tsx

@@ -80,7 +80,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
 
   return (
     <S.Wrapper className={wrapperClass} showTitle={showTitle} id={objKey}>
-      <S.Content error={errorField} data-testid="contentWrapper">
+      <S.Content error={errorField} data-testid="fields-behavior-wrapper">
         <Field
           {...props}
           showAdvanced={showAdvanced}

package/src/components/FloatingMenu/index.tsx

@@ -64,11 +64,11 @@ const FloatingMenu = (props: IProps) => {
       onMouseLeave={handleMouseLeave}
       data-testid="floating-menu"
     >
-      <S.ButtonWrapper ref={button}>
+      <S.ButtonWrapper ref={button} data-testid="floating-menu-button">
         <Button />
       </S.ButtonWrapper>
       {isOpen && (
-        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset}>
+        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset} data-testid="floating-menu-wrapper">
           <S.Menu>{children}</S.Menu>
         </S.MenuWrapper>
       )}

package/src/components/Gallery/GalleryFilters/Type/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+import { FloatingMenu, Icon, ListTitle, ListItem } from "@ax/components";
+
+import { areEquals } from "@ax/helpers";
+
+import * as S from "./style";
+
+const Type = ({ filterItems }: ITypeProps): JSX.Element => {
+  const initialState = ["all"];
+  const [selectedValue, setSelectedValue] = useState(initialState);
+
+  const setQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = initialState;
+    }
+    setSelectedValue([selection]);
+    const pointer = "format";
+    filterItems(pointer, selection);
+  };
+
+  const isActive = !areEquals(selectedValue, initialState);
+
+  const Header = () => (
+    <S.Type isActive={isActive}>
+      Media type
+      <S.IconsWrapper>
+        {isActive && <Icon name="Filter" size="16" />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.Type>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center" closeOnSelect={true}>
+      <ListTitle>Filter by type</ListTitle>
+      <ListItem isSelected={selectedValue.includes("all")} onClick={() => setQuery("all")}>All</ListItem>
+      <ListItem isSelected={selectedValue.includes("bitmap")} onClick={() => setQuery("bitmap")}>Image</ListItem>
+      <ListItem isSelected={selectedValue.includes("vectorial")} onClick={() => setQuery("vectorial")}>Icons</ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface ITypeProps {
+  filterItems(pointer: string, filter: string): void;
+}
+
+export default Type;

package/src/components/Gallery/GalleryFilters/Type/style.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const Type = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 90px;
+  white-space: nowrap;
+  justify-content: center;
+  flex-wrap: nowrap;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const ChecksWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+`;
+
+export { Type, IconsWrapper, InteractiveArrow, ChecksWrapper };

package/src/components/Gallery/GalleryPanel/DetailPanel/index.tsx

@@ -71,7 +71,8 @@ const GalleryDetailPanel = (props: IProps) => {
 
   const handleSetAsGlobal = async () => {
     const saveAsGlobal = !isGlobalTab && addToGlobal.isChecked && imageSelected?.file;
-    const image = saveAsGlobal && imageSelected && (await uploadImage(imageSelected.file, "global"));
+    const image =
+      saveAsGlobal && imageSelected && imageSelected.file && (await uploadImage(imageSelected.file, "global"));
     if (image && image.id) await updateImage(image.id, imageForm);
     setAddToGlobal({ value: "addToGlobal", isChecked: false });
   };

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/style.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 import { Button } from "@ax/components";
 
@@ -163,9 +164,8 @@ export const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
-export const FilesButton = styled(Button).attrs((props: any) => ({
-  ref: props.ref,
-}))<{ ref: any }>`
+const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
+export const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;

package/src/components/Gallery/hooks.tsx

@@ -21,13 +21,14 @@ const useSortedListStatus = () => {
 const useFilterQuery = () => {
   const initialQueryValues = {
     orientation: "",
-    order: ""
+    order: "",
+    format: ""
   };
 
   const [query, setQuery] = useState(initialQueryValues);
 
   const setFilterQuery = (filterValues: any) => {
-    const { orientation, order } = filterValues;
+    const { orientation, order, format } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
@@ -44,15 +45,20 @@ const useFilterQuery = () => {
       filterQuery = currentQuery("order", order);
     }
 
+    if (format) {
+      filterQuery = currentQuery("format", format);
+    }
+
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { orientation, order } = query;
+    const { orientation, order, format } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       orientation: pointer === "orientation" ? filter : orientation,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      format: pointer === "format" ? filter : format,
     };
 
     setQuery(filterValues);

package/src/components/Gallery/index.tsx

@@ -8,6 +8,7 @@ import { Icon, Loader, Tabs, SearchField, EmptyState, ErrorToast, Notification }
 
 import Orientation from "./GalleryFilters/Orientation";
 import SortBy from "./GalleryFilters/SortBy";
+import Type from "./GalleryFilters/Type";
 import GalleryPanel from "./GalleryPanel";
 import * as S from "./style";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
@@ -136,6 +137,7 @@ const Gallery = (props: IProps): JSX.Element => {
           )}
           <S.Filters>
             <Orientation filterItems={filterItems} />
+            <Type filterItems={filterItems} />
             <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
           </S.Filters>
         </S.Header>

package/src/components/Icon/index.tsx

@@ -22,7 +22,7 @@ const Icon = (props: IProps) => {
   const Svg = getImage(name);
 
   if (Svg) {
-    return <Svg data-testid="iconComponent" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
+    return <Svg data-testid="icon-component" height={size} width={size} viewBox="0 0 24 24" fill={fill} />;
   }
 
   return null;

package/src/components/IconAction/index.tsx

@@ -14,7 +14,7 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
 
   return (
     <S.Button
-      data-testid="iconActionComponent"
+      data-testid="icon-action-component"
       disabled={disabled}
       onClick={handleOnClick}
       size={size}

package/src/components/Lists/index.tsx

@@ -7,7 +7,7 @@ const ListItem = (props: ListItemProps): JSX.Element => {
   const { isSelected, children, onClick } = props;
 
   return (
-    <S.StyledListItem isSelected={isSelected} onClick={onClick}>
+    <S.StyledListItem isSelected={isSelected} onClick={onClick} data-testid="list-item">
       {children}
       {isSelected && <Icon name="Done" size="16" />}
     </S.StyledListItem>

package/src/components/Loading/index.tsx

@@ -5,7 +5,7 @@ import * as S from "./style";
 
 const Loading = (): JSX.Element => {
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="loading-wrapper">
       <S.LoadingWrapper>
         <Loader name="circle" />
       </S.LoadingWrapper>

package/src/components/Pagination/index.tsx

@@ -36,7 +36,7 @@ const Pagination = (props: IProps) => {
   const CurrentPage = size === "S" ? currPage : <S.Input type="text" value={currPage} onChange={_handleChange} />;
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="pagination-wrapper">
       <S.Literal size={size}>
         Page {CurrentPage} of {lastPage}
       </S.Literal>

package/src/components/SideModal/SideModalOption/index.tsx

@@ -14,7 +14,9 @@ const SideModalOption = (props: IProps) => {
 
   const isNavigationDefault = ["header", "footer"].includes(option.type);
 
-  const thumbnailProps = getThumbnailData(option, theme);
+  const navigationThumbnail = isNavigationDefault &&
+    option.thumbnail && { alt: option.title, src: option.thumbnail.url };
+  const thumbnailProps = navigationThumbnail || getThumbnailData(option, theme);
 
   const optionParam = option.component || option;
   const label = isNavigationDefault ? option.title : getDisplayName(optionParam);
@@ -25,7 +27,7 @@ const SideModalOption = (props: IProps) => {
   };
 
   return (
-    <S.Item onClick={setOption}>
+    <S.Item onClick={setOption} data-testid="side-modal-option">
       <S.Thumbnail {...thumbnailProps} />
       {label}
     </S.Item>

package/src/components/SideModal/index.tsx

@@ -137,7 +137,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   return isOpen
     ? createPortal(
-        <S.Wrapper ref={node} optionsType={optionsType}>
+        <S.Wrapper ref={node} optionsType={optionsType} data-testid="side-modal">
           <S.Header>
             <S.Title>{optionsType}</S.Title>
             {showSearch && optionsType !== "components" && (

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -75,7 +75,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 
   return (
     <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
-      <ListTitle>Filter by Category</ListTitle>
+      <ListTitle data-testid="category-filter-title">Filter by Category</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
       </S.ChecksWrapper>
@@ -83,7 +83,7 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
   );
 };
 
-interface ICategoryFilterProps {
+export interface ICategoryFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
   structuredData: any;

package/src/components/TableFilters/CategoryFilter/style.tsx

@@ -19,18 +19,9 @@ const IconsWrapper = styled.div`
   }
 `;
 
-const InteractiveArrow = styled.div`
-  display: flex;
-  svg {
-    path {
-      fill: ${(p) => p.theme.color.interactive01};
-    }
-  }
-`;
-
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   overflow-y: auto;
 `;
 
-export { HeaderWrapper, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { HeaderWrapper, IconsWrapper, ChecksWrapper };

package/src/components/TableFilters/CustomizeFilters/index.tsx

@@ -6,7 +6,6 @@ import * as S from "./style";
 
 const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   const { columns, setColumns, value } = props;
-
   const options = Object.keys(columns).map((col: string) => {
     const disabled = value.length >= 5 && !value.includes(col);
     return { name: col, title: columns[col].title, value: col, disabled };
@@ -31,7 +30,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="customize-filters-wrapper">
       <FloatingMenu Button={Button} position="right" closeOnSelect={false}>
         <ListTitle>Customize filters</ListTitle>
         <S.Note>You can select up to five options</S.Note>
@@ -43,7 +42,7 @@ const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
   );
 };
 
-interface ICustomizeFiltersProps {
+export interface ICustomizeFiltersProps {
   setColumns(newValue: any): void;
   columns: Record<string, IColumn>;
   value: string[];