@griddo/ax 11.0.29-rc.0 → 11.0.30-rc.0

package/src/components/MainWrapper/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IErrorItem } from "@ax/types";
+import { IErrorItem, ILanguage } from "@ax/types";
 
 import AppBar from "./AppBar";
 
@@ -32,18 +32,13 @@ export interface IWrapperProps {
   tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
   pageStatus?: string;
   language?: { locale: string; id: number | null } | null;
-  availableLanguages?: any[] | null;
-  pageLanguages?: any[];
+  availableLanguages?: ILanguage[];
+  currentLanguages?: ILanguage[];
   inversed?: boolean;
   currentPageID?: number;
   fullWidth?: boolean;
   isFromEditor?: boolean;
-  languageActions?: {
-    setLanguage?(lang: { locale: string; id: number | null }): void;
-    setIsNewTranslation?(isNewTranslation: boolean): void;
-    getContent?(id?: number): Promise<void>;
-    getDataContent?(dataID?: number): Promise<void>;
-  } | null;
+  languageAction?: (lang: ILanguage) => void;
   searchAction?(query: string): void;
   filterSearchAction?(filter: string): void;
   searchFilters?: any;

package/src/components/MenuItem/index.tsx

@@ -15,7 +15,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
 
   const handleExtendedAction = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
-    extendedAction && extendedAction.action();
+    extendedAction?.action && extendedAction.action();
   };
 
   return (
@@ -41,7 +41,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
 export interface IMenuItemProps {
   children: JSX.Element | string;
   onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
-  extendedAction?: { icon: string; action: () => void; onlyOnHover?: boolean } | null;
+  extendedAction?: { icon: string; action?: () => void; onlyOnHover?: boolean } | null;
   className?: string;
   disabled?: boolean;
 }

package/src/components/ResizePanel/index.tsx

@@ -4,7 +4,7 @@ import ResizeHandle from "./ResizeHandle";
 import * as S from "./style";
 
 const ResizePanel = (props: IResizePanelProps): JSX.Element => {
-  const { leftPanel, rightPanel, fixed = true } = props;
+  const { leftPanel, rightPanel, fixed = true, full = false } = props;
 
   const [rwidth, setRwidth] = useState(0);
 
@@ -26,7 +26,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
     <>
       <S.LeftPanel data-testid="left-panel">
         {fixed ? (
-          <S.FixedPanel width={rwidth} data-testid="fixed-panel">
+          <S.FixedPanel width={rwidth} full={full} data-testid="fixed-panel">
             {leftPanel}
           </S.FixedPanel>
         ) : (
@@ -45,6 +45,7 @@ export interface IResizePanelProps {
   leftPanel: JSX.Element | JSX.Element[];
   rightPanel: JSX.Element | JSX.Element[];
   fixed?: boolean;
+  full?: boolean;
 }
 
 export default ResizePanel;

package/src/components/ResizePanel/style.tsx

@@ -5,13 +5,13 @@ const getWidth = (width: number, space: string) => {
   return minWidth < 500 ? `500px` : `${minWidth}px`;
 };
 
-export const LeftPanel = styled.section`
+const LeftPanel = styled.section`
   position: relative;
   flex-grow: 1;
   min-width: 500px;
 `;
 
-export const RightPanel = styled.section<{ width: number }>`
+const RightPanel = styled.section<{ width: number }>`
   display: flex;
   position: relative;
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
@@ -22,13 +22,15 @@ export const RightPanel = styled.section<{ width: number }>`
   flex-direction: column;
 `;
 
-export const FixedPanel = styled.div<{ width: number }>`
+const FixedPanel = styled.div<{ width: number; full: boolean }>`
   position: sticky;
-  top: calc(${(p) => p.theme.spacing.xl} + ${(p) => p.theme.spacing.m});
-  height: calc(
-    100vh - (${(p) => p.theme.spacing.xl} + (${(p) => p.theme.spacing.m} * 2)) -
-      (${(p) => p.theme.spacing.m} + (${(p) => p.theme.spacing.xs} * 2))
-  );
+  top: ${(p) => (p.full ? p.theme.spacing.xl : `calc(${p.theme.spacing.xl} + ${p.theme.spacing.m})`)};
+  height: ${(p) =>
+    p.full
+      ? `calc(100vh - ${p.theme.spacing.xl})`
+      : `calc(100vh - (${p.theme.spacing.xl} + (${p.theme.spacing.m} * 2)) - (${p.theme.spacing.m} + (${p.theme.spacing.xs} * 2)))`};
   min-width: ${(p) => getWidth(p.width, p.theme.spacing.m)};
-  margin-left: ${(p) => p.theme.spacing.m};
+  margin-left: ${(p) => (p.full ? "0" : p.theme.spacing.m)};
 `;
+
+export { LeftPanel, RightPanel, FixedPanel };

package/src/components/SearchField/style.tsx

@@ -33,7 +33,7 @@ const Input = styled.input<{
   background-color: ${(p) => p.theme.color.interactiveBackground};
   flex: 1 1 auto;
   height: ${(p) => (p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
-  padding-left: ${(p) => p.theme.spacing.xs};
+  padding-left: ${(p) => p.theme.spacing.s};
   border: none;
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
   width: ${(p) =>
@@ -47,7 +47,7 @@ const Input = styled.input<{
 
 const IconSearchWrapper = styled.div<{ onClick?: () => void; disabled: boolean }>`
   position: absolute;
-  right: ${(p) => p.theme.spacing.xxs};
+  right: ${(p) => p.theme.spacing.s};
   top: 50%;
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};

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

@@ -12,7 +12,7 @@ const getThumbnailData = (option: any, theme: string) => {
 };
 
 const SideModalOption = (props: IProps) => {
-  const { option, handleClick, toggleModal, theme } = props;
+  const { option, handleClick, toggleModal, theme, smallMargin } = props;
 
   const isNavigationDefault = ["header", "footer"].includes(option.type);
 
@@ -37,7 +37,7 @@ const SideModalOption = (props: IProps) => {
   ) : null;
 
   return (
-    <S.Item onClick={setOption} data-testid="side-modal-option">
+    <S.Item onClick={setOption} smallMargin={smallMargin} data-testid="side-modal-option">
       <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
       {label}
       {defaultTag}
@@ -51,6 +51,7 @@ interface IProps {
   toggleModal: () => void;
   children: string;
   theme: string;
+  smallMargin: boolean;
 }
 
 export default memo(SideModalOption);

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

@@ -1,10 +1,10 @@
 import styled from "styled-components";
 
-const Item = styled.li`
+const Item = styled.li<{ smallMargin: boolean }>`
   cursor: pointer;
   padding: ${(p) => p.theme.spacing.xs};
   padding-bottom: ${(p) => p.theme.spacing.s};
-  margin-bottom: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => (p.smallMargin ? p.theme.spacing.xs : p.theme.spacing.s)};
   box-shadow: ${(p) => p.theme.shadow.shadowS};
   border-radius: ${(p) => p.theme.radii.s};
   ${(p) => p.theme.textStyle.uiS};

package/src/components/SideModal/index.tsx

@@ -25,6 +25,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   const componentList: any = [];
   const hasCategories = categories && categories.length > 1;
+  const hasFieldsStyle = optionsType === "fields";
 
   const optionList = componentOptions ? componentList : whiteList;
 
@@ -136,6 +137,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
           toggleModal={handleToggleModal}
           key={`${option}${i}`}
           theme={theme}
+          smallMargin={hasFieldsStyle}
         >
           {displayName}
         </SideModalOption>
@@ -144,12 +146,17 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   return isOpen
     ? createPortal(
-        <S.Wrapper ref={node} optionsType={optionsType} data-testid="side-modal">
-          <S.Header>
-            <S.Title data-testid="side-modal-title">{optionsType}</S.Title>
+        <S.Wrapper ref={node} optionsType={optionsType} hasFieldsStyle={hasFieldsStyle} data-testid="side-modal">
+          <S.Header hasFieldsStyle={hasFieldsStyle}>
+            {!hasFieldsStyle && <S.Title data-testid="side-modal-title">{optionsType}</S.Title>}
             {showSearch && optionsType !== "components" && (
               <S.SearchWrapper>
-                <SearchField onChange={setSearchQuery} closeOnInactive small={!filters} />
+                <SearchField
+                  onChange={setSearchQuery}
+                  closeOnInactive={!hasFieldsStyle}
+                  small={!filters}
+                  placeholder={hasFieldsStyle ? "Search field" : ""}
+                />
               </S.SearchWrapper>
             )}
             {!showSearch && (

package/src/components/SideModal/style.tsx

@@ -2,28 +2,28 @@ import styled from "styled-components";
 
 const placeRight = ["components", "headers", "footers"];
 
-const Wrapper = styled.div<{ optionsType?: string }>`
+const Wrapper = styled.div<{ optionsType?: string; hasFieldsStyle: boolean }>`
   position: fixed;
   left: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? "unset" : 0)};
   right: ${(p) => (p.optionsType && placeRight.includes(p.optionsType) ? 0 : "unset")};
   top: 0;
   z-index: 1000;
-
+  margin-top: ${(p) => (p.hasFieldsStyle ? p.theme.spacing.xl : "0")};
   height: 100vh;
   background: ${(p) => p.theme.colors.uiBackground01};
   box-shadow: ${(p) =>
     p.optionsType && placeRight.includes(p.optionsType) ? p.theme.shadow.rightPanel : p.theme.shadow.leftPanel};
 `;
 
-const Header = styled.div`
+const Header = styled.div<{ hasFieldsStyle: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: ${(p) => p.theme.spacing.xl};
   width: 100%;
-  padding: 0 ${(p) => p.theme.spacing.m};
-  background-color: ${(p) => p.theme.colors.uiBackground02};
-  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
+  padding: ${(p) => (p.hasFieldsStyle ? `${p.theme.spacing.m} ${p.theme.spacing.m} 0` : `0 ${p.theme.spacing.m}`)};
+  background-color: ${(p) => (p.hasFieldsStyle ? "transparent" : p.theme.colors.uiBackground02)};
+  border-bottom: ${(p) => (p.hasFieldsStyle ? "none" : `1px solid ${p.theme.colors.uiLine}`)};
   h6 {
     ${(p) => p.theme.textStyle.headingM}
     color: ${(p) => p.theme.colors.textHighEmphasis};
@@ -58,7 +58,9 @@ const FeaturedWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-const SearchWrapper = styled.div``;
+const SearchWrapper = styled.div`
+  width: 100%;
+`;
 
 const Link = styled.div<{ active: boolean }>`
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};

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

@@ -8,7 +8,7 @@ import { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
-  const { filterItems, value, statusOptions } = props;
+  const { filterItems, value, hasBasicStatus } = props;
 
   const filters: IFilterValue[] = [
     {
@@ -24,6 +24,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
+  const basicStatus = ["offline", "active", "scheduled"];
 
   useEffect(() => {
     const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
@@ -54,7 +55,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
               title: item.title,
               icon: item.status,
             };
-            if ((Array.isArray(statusOptions) && statusOptions.includes(newFilter.value)) || !statusOptions) {
+            if ((hasBasicStatus && basicStatus.includes(newFilter.value)) || !hasBasicStatus) {
               filters.push(newFilter);
             }
           });
@@ -111,7 +112,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 export interface ILiveFilterProps {
   filterItems(pointer: string, filter: IQueryValue[]): void;
   value: IQueryValue[];
-  statusOptions?: string[];
+  hasBasicStatus?: boolean;
   isSite?: boolean;
 }
 

package/src/components/index.tsx

@@ -10,6 +10,8 @@ import {
   DateField,
   FieldGroup,
   FieldsDivider,
+  FileField,
+  FormFieldArray,
   HeadingField,
   HiddenField,
   ImageField,
@@ -124,6 +126,8 @@ export {
   DateField,
   FieldGroup,
   FieldsDivider,
+  FileField,
+  FormFieldArray,
   HeadingField,
   HiddenField,
   ImageField,

package/src/containers/App/reducer.tsx

@@ -13,6 +13,7 @@ import {
   SET_SESSION_STARTED_AT,
   SET_HAS_ANIMATION,
 } from "./constants";
+import { ILanguage } from "@ax/types";
 
 export interface IAppState {
   isRehydrated: boolean;
@@ -23,7 +24,7 @@ export interface IAppState {
   token: string;
   isLoggingIn: boolean;
   lang: { locale: string; id: number };
-  globalLangs: any;
+  globalLangs: ILanguage[];
   globalSettings: IGlobalSettings;
   sessionStartedAt: null | Date;
   hasAnimation: boolean;
@@ -54,6 +55,7 @@ export interface IGlobalSettings {
   autoTranslation: boolean;
   SSOActivated: boolean;
   SSOWelcomeText: string;
+  useForms: boolean;
 }
 
 export const initialState = {
@@ -86,6 +88,7 @@ export const initialState = {
     autoTranslation: false,
     SSOActivated: false,
     SSOWelcomeText: "",
+    useForms: false,
   },
   sessionStartedAt: null,
   hasAnimation: false,