@griddo/ax 1.57.9 → 1.57.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.57.9",
+  "version": "1.57.13",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -99,11 +99,12 @@
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "pkg-dir": "^5.0.0",
     "polished": "3.4.1",
+    "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
+    "postcss-safe-parser": "^6.0.0",
     "react": "^18.0.0-rc.0-next-3b3daf557-20211210",
     "react-app-polyfill": "^1.0.4",
     "react-datepicker": "^3.2.2",
@@ -156,6 +157,9 @@
     "prettier": "^2.3.0",
     "react-test-render": "1.1.2"
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "babel": {
     "presets": [
       "react-app",
@@ -237,5 +241,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c496fb554ceabad71fde7106a60e1ad78066497d"
+  "gitHead": "6e011bce3d0578bfa5be5639fecf513689b3e22a"
 }

package/src/components/Fields/FileField/FileDragAndDrop/style.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "@ax/components";
+import Button from "@ax/components/Button";
 
 export const Wrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBarBackground};
@@ -56,28 +56,28 @@ export const UploadingStatus = styled.div`
 
 export const SuccessStatus = styled.div`
   transition: opacity 0.1s;
-  ${DragIcon} {
+  ${DragIcon as any} {
     svg {
       path {
         fill: ${(p) => p.theme.color.online};
       }
     }
   }
-  ${DragTitle} {
+  ${DragTitle as any} {
     color: ${(p) => p.theme.color.textHighEmphasis};
   }
 `;
 
 export const ErrorStatus = styled.div`
   transition: opacity 0.1s;
-  ${DragIcon} {
+  ${DragIcon as any} {
     svg {
       path {
         fill: ${(p) => p.theme.color.error};
       }
     }
   }
-  ${DragTitle} {
+  ${DragTitle as any} {
     color: ${(p) => p.theme.color.textHighEmphasis};
   }
 `;

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ActionMenu } from "@ax/components";
+import ActionMenu from "@ax/components/ActionMenu";
 
 const Field = styled.div`
   display: flex;
@@ -79,7 +79,7 @@ const Component = styled.span`
   cursor: pointer;
   :hover {
     background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
-    ${StyledActionMenu} {
+    ${StyledActionMenu as any} {
       opacity: 1;
     }
   }

package/src/components/Fields/index.tsx

@@ -3,15 +3,19 @@ import AsyncCheckGroup from "./AsyncCheckGroup";
 import AsyncSelect from "./AsyncSelect";
 import CheckField from "./CheckField";
 import CheckGroup from "./CheckGroup";
+import ColorPicker from "./ColorPicker";
 import ComponentArray from "./ComponentArray";
 import ComponentContainer from "./ComponentContainer";
 import ConditionalField from "./ConditionalField";
 import DateField from "./DateField";
 import FieldGroup from "./FieldGroup";
 import FieldsDivider from "./FieldsDivider";
+import FileField from "./FileField";
 import HeadingField from "./HeadingField";
 import HiddenField from "./HiddenField";
 import ImageField from "./ImageField";
+import MultiCheckSelect from "./MultiCheckSelect";
+import MultiCheckSelectGroup from "./MultiCheckSelectGroup";
 import NoteField from "./NoteField";
 import NumberField from "./NumberField";
 import RadioField from "./RadioField";
@@ -36,15 +40,19 @@ export {
   AsyncSelect,
   CheckField,
   CheckGroup,
+  ColorPicker,
   ComponentArray,
   ComponentContainer,
   ConditionalField,
   DateField,
   FieldGroup,
   FieldsDivider,
+  FileField,
   HeadingField,
   HiddenField,
   ImageField,
+  MultiCheckSelect,
+  MultiCheckSelectGroup,
   NoteField,
   NumberField,
   RadioField,

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

@@ -8,7 +8,8 @@ import { Icon, DragAndDrop } from "@ax/components";
 import * as S from "./style";
 
 const GalleryDragAndDrop = (props: IProps) => {
-  const { isImageSelected,
+  const {
+    isImageSelected,
     validFormats,
     site,
     allowUpload,
@@ -65,7 +66,7 @@ const GalleryDragAndDrop = (props: IProps) => {
   const handleUploadFile = async (files: Array<any>) => {
     if (files[0]) {
       if (!checkType(files[0].type)) {
-        uploadError("Invalid format");
+        uploadError(true, "Invalid format");
       } else {
         try {
           const newImage = await uploadImage(files[0], site);
@@ -81,6 +82,7 @@ const GalleryDragAndDrop = (props: IProps) => {
 
   const handleTryAgain = () => {
     setInDropZone(false);
+    uploadError(false);
   };
 
   const handleFileClick = () => {
@@ -130,25 +132,14 @@ const GalleryDragAndDrop = (props: IProps) => {
       </S.DragIcon>
       <S.DragTitle>Select an image to see details</S.DragTitle>
     </S.StatusWrapper>
-
   );
 
   return (
     <S.Wrapper hidden={isImageSelected}>
-      <S.DragAndDropWrapper
-        inDropZone={inDropZone}
-        uploading={isUploading}
-        success={isSuccess}
-        error={isError}
-      >
+      <S.DragAndDropWrapper inDropZone={inDropZone} uploading={isUploading} success={isSuccess} error={isError}>
         {allowUpload ? renderDragAndDrop() : renderPlaceholder()}
       </S.DragAndDropWrapper>
-      <S.UploadingWrapper
-        inDropZone={inDropZone}
-        uploading={isUploading}
-        success={isSuccess}
-        error={isError}
-      >
+      <S.UploadingWrapper inDropZone={inDropZone} uploading={isUploading} success={isSuccess} error={isError}>
         <S.StatusWrapper>
           <S.UploadingStatus>
             <S.DragIcon>
@@ -184,9 +175,9 @@ interface IGalleryDragAndDropProps {
   site: number | string;
   allowUpload: boolean;
   refreshImages: () => Promise<void>;
-  isUploading: boolean,
-  isSuccess: boolean,
-  isError: boolean,
+  isUploading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
   errorMsg: string;
 }
 
@@ -200,7 +191,7 @@ const mapStateToProps = (state: IRootState) => ({
 interface IDispatchProps {
   getSiteImages(params: IGetSiteImages): Promise<void>;
   selectImage(item: IImage): void;
-  uploadError: (error: string) => Promise<void>;
+  uploadError: (error: boolean, msg?: string) => Promise<void>;
   uploadImage: (imageFile: File, site: number | string) => Promise<IImage>;
 }
 
@@ -213,4 +204,4 @@ const mapDispatchToProps = {
 
 type IProps = IGalleryDragAndDropProps & IDispatchProps;
 
-export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDragAndDrop));
+export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDragAndDrop));

package/src/components/Gallery/index.tsx

@@ -17,7 +17,7 @@ const itemsPerPage = 50;
 const firstPage = 1;
 
 const Gallery = (props: IProps): JSX.Element => {
-  const { data, isLoading, getSiteImages, selectImage, getImageSelected, toggleModal, site } = props;
+  const { data, isLoading, getSiteImages, selectImage, getImageSelected, toggleModal, site, uploadError } = props;
 
   const tabs = [];
   if (site) tabs.unshift(...["Local", "Global"]);
@@ -48,6 +48,7 @@ const Gallery = (props: IProps): JSX.Element => {
   pageRef.current = getParams().page;
 
   useEffect(() => {
+    uploadError(false);
     const params = getParams();
     getSiteImages({ ...params, page: firstPage });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -220,11 +221,13 @@ const mapStateToProps = (state: IRootState) => ({
 interface IDispatchProps {
   getSiteImages(params: IGetSiteImages): Promise<void>;
   selectImage(item: IImage): void;
+  uploadError: (error: boolean, msg?: string) => Promise<void>;
 }
 
 const mapDispatchToProps = {
   getSiteImages: galleryActions.getSiteImages,
   selectImage: galleryActions.selectImage,
+  uploadError: galleryActions.uploadError,
 };
 
 type IProps = IGalleryProps & IDispatchProps;

package/src/components/Modal/style.tsx

@@ -73,6 +73,7 @@ export const ModalHeader = styled.div`
 export const ModalContent = styled.div`
   position: relative;
   flex-grow: 1;
+  overflow: auto;
 `;
 
 export const Title = styled.div`

package/src/containers/Gallery/actions.tsx

@@ -47,8 +47,8 @@ function setUploadSuccess(isSuccess: boolean): ISetUploadSuccess {
   return { type: SET_UPLOAD_SUCCESS, payload: { isUploading: false, isSuccess } };
 }
 
-function setUploadError(errorMsg = ""): ISetUploadError {
-  return { type: SET_UPLOAD_ERROR, payload: { inDropZone: false, isUploading: false, isError: true, errorMsg } };
+function setUploadError(isError: boolean, errorMsg = ""): ISetUploadError {
+  return { type: SET_UPLOAD_ERROR, payload: { inDropZone: false, isUploading: false, isError, errorMsg } };
 }
 
 function getSiteImages(props: IGetSiteImages): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
@@ -110,7 +110,7 @@ function uploadImage(imageFile: File, site: number | string): (dispatch: Dispatc
         // dispatch(setInDropZone(false));
         return { ...result.data, file: image };
       } else {
-        dispatch(setUploadError("Error uploading image"));
+        dispatch(setUploadError(true, "Error uploading image"));
       }
     } catch (e) {
       console.log(e);
@@ -118,9 +118,9 @@ function uploadImage(imageFile: File, site: number | string): (dispatch: Dispatc
   };
 }
 
-function uploadError(error: string): (dispatch: Dispatch) => Promise<void> {
+function uploadError(error: boolean, msg?: string): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
-    dispatch(setUploadError(error));
+    dispatch(setUploadError(error, msg));
   };
 }
 

package/src/modules/Sites/SitesList/SiteModal/style.tsx

@@ -4,8 +4,9 @@ export const Form = styled.div`
   display: flex;
   height: 100%;
   width: 100%;
-  padding: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
   flex-direction: column;
+  overflow: auto;
 `;
 
 export const FieldsWrapper = styled.div`