@griddo/ax 1.69.9 → 1.72.1

package/src/helpers/parseTheme.js

@@ -0,0 +1,456 @@
+const procUnit = (u, fn) => {
+  const unitLess = parseFloat(u.match(/\d*\.?\d*/)[0]);
+  const unit = u.split(unitLess.toString())[1];
+  const unitLessProccesed = fn(unitLess);
+  return `${unitLessProccesed}${unit}`;
+};
+
+const halfUnit = (u) => {
+  return procUnit(u, (n) => n / 2);
+};
+
+/**
+ * hexToRGBA
+ * Convierte un color en formato Hexadecimal a formato RGBA
+ * @param {string} hex El color en formato hexadecimal
+ * @param {number} opacity La valor de opacidad del color, de 0 a 1
+ * @example
+ * Convierte el color #FFFFFF a RGBA()
+ * hexToRGBA("#FFFFFF", 0.5)
+ * -> "rgba(255, 255, 255, 0.5)"
+ *
+ * @return {string} Una cadena con el valor rgba dentro de rgba()
+ */
+const hexToRGBA = (hex, opacity = 1.0) => {
+  const clearHex = hex[0] === "#" ? hex.substring(1, 7) : hex;
+  const hexToR = parseInt(clearHex.substring(0, 2), 16);
+  const hexToG = parseInt(clearHex.substring(2, 4), 16);
+  const hexToB = parseInt(clearHex.substring(4, 6), 16);
+  return `rgba(${hexToR}, ${hexToG}, ${hexToB}, ${opacity})`;
+};
+
+/**
+ * isDifferent
+ * Comprueba si value1 y value2 son iguales, en caso negativo devuelve una cadena
+ * con el valor `value2` asociado a la `prop` (css).
+ * Si son iguales devuelve una cadena vacía.
+ *
+ * Esta función se usa para construir una especia de cascada (a lo css) al
+ * construir los estilos de textos responsive. Así si hay una nueva proiedad
+ * con un valor diferente
+ *
+ * @param {string} prop La propiedad css que compara
+ * @param {string} value1 El primera valor de la prop
+ * @param {string} value2 El segundo valor de la prop
+ * @example
+ * Compara el font-size
+ * isDifferent("font-size", "24px", "24px")
+ * -> ""
+ *
+ * @example
+ * Compara el font-size
+ * isDifferent("font-size", "10px", "32px")
+ * -> "font-size: 32px"
+ *
+ * @return {string} Una cadena con la propiedad y el valor nuevo, o una cadena
+ * vacía, si los valores son iguales.
+ */
+const isDifferent = (prop, value1, value2) => {
+  if (value2) {
+    if (value1 === value2) {
+      return "";
+    } else {
+      return `${prop}: ${value2};`;
+    }
+  } else {
+    return "";
+  }
+};
+
+/**
+ * has
+ * Determina si existe en el archivo .json una propiedad.
+ * Si existe devuelve el par "prop: value", si no busca la proiedad en el
+ * apartado defaultStyles y la devuelve. Si tampoco existe ahí, devuelve ""
+ *
+ * @param {string} prop La propiedad css
+ * @param {string} value El valor de la propiedad css
+ * @param {string} fallBackValue El valor de la propiedad css en caso de no
+ * existir la propiedad value
+ */
+const has = (prop, value, fallBackValue) => {
+  if (value) {
+    return `${prop}: ${value};`;
+  }
+  if (fallBackValue) {
+    return `${prop}: ${fallBackValue};`;
+  }
+  return "";
+};
+
+/**
+ * parseColors
+ * Parsea un objeto de colors con la siguiente estructura
+ * {
+ *   color: {
+ *     colors: {
+ *       colorName1: {
+ *         value: "#ffffff",
+ *         opacity: "1"
+ *       },
+ *       colorName2: {
+ *         value: "#ffffff",
+ *         opacity: "1"
+ *       },
+ *     }
+ *   }
+ * }
+ * @param {object} theme El tema
+ */
+
+const parseColors = (theme) => {
+  try {
+    const colors = theme.color.colors;
+    const color = Object.keys(colors).reduce((acc, label) => {
+      const isOpaque = (entry) => entry.opacity === 1 || entry.opacity === undefined || entry.opacity === null;
+      const _isHEX = (entry) => {
+        try {
+          return entry.value[0] === "#";
+        } catch (e) {
+          return false;
+        }
+      };
+      const _isHSL = (entry) => {
+        try {
+          return entry.type.toLowerCase() === "hsl";
+        } catch (e) {
+          return false;
+        }
+      };
+      const _isRGB = (entry) => {
+        try {
+          return entry.type.toLowerCase() === "rgb";
+        } catch (e) {
+          return false;
+        }
+      };
+      const isHSL = (entry) => _isHSL(entry) && isOpaque(entry);
+      const isHSLA = (entry) => _isHSL(entry) && !isOpaque(entry);
+      const isHEX = (entry) => _isHEX(entry) && isOpaque(entry);
+      const isHEXA = (entry) => _isHEX(entry) && !isOpaque(entry);
+      const isRGB = (entry) => _isRGB(entry) && isOpaque(entry);
+      const isRGBA = (entry) => _isRGB(entry) && !isOpaque(entry);
+
+      if (isHSLA(colors[label])) {
+        acc[label] = `hsla(${colors[label].value
+          .map((v, idx) => `${idx === 0 ? v : typeof v === "string" ? (v.indexOf("%") === -1 ? v + "%" : v) : v + "%"}`)
+          .join(", ")}, ${colors[label].opacity})`;
+      }
+      if (isHSL(colors[label])) {
+        acc[label] = `hsl(${colors[label].value
+          .map((v, idx) => `${idx === 0 ? v : typeof v === "string" ? (v.indexOf("%") === -1 ? v + "%" : v) : v + "%"}`)
+          .join(", ")})`;
+      }
+      if (isHEX(colors[label])) {
+        acc[label] = `${colors[label].value}`;
+      }
+      if (isHEXA(colors[label])) {
+        acc[label] = `${hexToRGBA(colors[label].value, colors[label].opacity)}`;
+      }
+      if (isRGB(colors[label])) {
+        acc[label] = `rgb(${colors[label].value.join(", ")})`;
+      }
+      if (isRGBA(colors[label])) {
+        acc[label] = `rgba(${colors[label].value.join(", ")}, ${colors[label].opacity})`;
+      }
+      return acc;
+    }, {});
+
+    // Autogenerador
+    // color.interactiveMain = color.interactiveMain ? "#fff" : "#000"
+
+    return color;
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseGradients = (theme) => {
+  try {
+    const gradients = theme.gradient.gradients;
+    const gradient = Object.keys(gradients).reduce((acc, label) => {
+      acc[label] = `linear-gradient(${gradients[label].direction}, ${gradients[label].stops
+        .map((stop) => `${hexToRGBA(stop.color, stop.opacity)} ${stop.position}`)
+        .join(",")})`;
+      return acc;
+    }, {});
+    return gradient;
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseShadows = (theme) => {
+  try {
+    const shadows = theme.shadow.shadows;
+    const shadow = Object.keys(shadows).reduce((acc, label) => {
+      acc[label] = `${shadows[label].x}px ${shadows[label].y}px ${shadows[label].blur}px ${hexToRGBA(
+        shadows[label].color,
+        shadows[label].opacity
+      )}`;
+      return acc;
+    }, {});
+    return shadow;
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseMediaqueries = (theme) => {
+  try {
+    const mediaqueries = theme.mediaquery.mediaqueries;
+    let mqObject = {};
+    mediaqueries.forEach((mq) => {
+      if (mq.label !== "default") {
+        const minWidth = mq.minWidth ? `and (min-width: ${mq.minWidth})` : "";
+        const maxWidth = mq.maxWidth ? `and (max-width: ${mq.maxWidth})` : "";
+        mqObject[mq.label] = `@media only screen ${minWidth} ${maxWidth}`;
+      }
+    });
+
+    return mqObject;
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseFontFamilies = (theme) => {
+  try {
+    return theme.fontFamily.fontFamilies;
+  } catch (e) {
+    return null;
+  }
+};
+
+const getUnitValue = (x) => {
+  if (typeof x === "string") {
+    return x.match(/\d*\.?\d+?/)[0];
+  }
+  if (typeof x === "number") {
+    return x;
+  }
+};
+
+const cropText = (top, bottom) => {
+  return `
+	&::before, &::after {
+	  content: "";
+	  display: block;
+	}
+	&::before {
+	  margin-bottom: ${bottom}em;
+	}
+	&::after {
+	  margin-top: ${top}em;
+	}
+	`;
+};
+
+export const parseTextStyles = (theme) => {
+  try {
+    // Space object for rebass grid.
+    const mq = parseMediaqueries(theme);
+    const fontFamily = parseFontFamilies(theme);
+
+    // With process
+    const defaultStyles = theme.textStyle.defaultStyles;
+    const textStyles = theme.textStyle.textStyles;
+
+    // fontRes
+    let textStyleObject = {};
+    textStyles.forEach((style) => {
+      let FONTSIZE = getUnitValue(style.fontSize);
+      let CROPTOP = style.croptop !== undefined ? style.croptop : 0;
+      let CROPBOTTOM = style.cropbottom !== undefined ? style.cropbottom : 0;
+      let dynCropTop = (Math.max(CROPTOP + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+      let dynCropBottom = (Math.max(CROPBOTTOM + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+      textStyleObject[style.name] = `
+      
+	  ${has("font-family", fontFamily[style.fontFamily], fontFamily[defaultStyles.fontFamily])}
+	  ${has("font-size", style.fontSize, defaultStyles.fontSize)}
+	  ${has("font-weight", style.fontWeight, defaultStyles.fontWeight)}
+	  ${has("letter-spacing", style.letterSpacing, defaultStyles.letterSpacing)}
+	  ${has("line-height", style.lineHeight, defaultStyles.lineHeight)}
+	  ${has("font-style", style.fontStyle, defaultStyles.fontStyle)}
+	  ${has("text-transform", style.textTransform, defaultStyles.textTransform)}
+	  ${CROPTOP && CROPBOTTOM ? cropText(dynCropTop, dynCropBottom) : ""}
+	  
+	  ${
+      style.responsive
+        ? style.responsive
+            .map((bp, idx) => {
+              FONTSIZE = getUnitValue(bp.fontSize);
+              CROPTOP = bp.croptop !== undefined ? bp.croptop : 0;
+              CROPBOTTOM = bp.cropbottom !== undefined ? bp.cropbottom : 0;
+              dynCropTop = (Math.max(CROPTOP + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+              dynCropBottom = (Math.max(CROPBOTTOM + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+              if (idx < 1) {
+                // En el primer ciclo se compara con el breakpoint base: style
+                return `
+		${mq[bp.breakpoint]} {
+		  ${isDifferent("font-family", fontFamily[style.fontFamily], fontFamily[bp.fontFamily])}
+		  ${isDifferent("font-size", style.fontSize, bp.fontSize)}
+		  ${isDifferent("font-weight", style.fontWeight, bp.fontWeight)}
+		  ${isDifferent("line-height", style.lineHeight, bp.lineHeight)}
+		  ${isDifferent("letter-spacing", style.letterSpacing, bp.letterSpacing)}
+		  ${isDifferent("font-style", style.fontStyle, bp.fontStyle)}
+		  ${isDifferent("text-transform", style.textTransform, bp.textTransform)}
+		  ${CROPTOP && CROPBOTTOM ? cropText(dynCropTop, dynCropBottom) : ""}
+		}
+	      `;
+              } else {
+                // A partir del segundo ciclo se compara con el breakpoint anterior
+                FONTSIZE = getUnitValue(bp.fontSize);
+                CROPTOP = bp.croptop !== undefined ? bp.croptop : 0;
+                CROPBOTTOM = bp.cropbottom !== undefined ? bp.cropbottom : 0;
+                dynCropTop = (Math.max(CROPTOP + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+                dynCropBottom = (Math.max(CROPBOTTOM + (1 - 1) * (FONTSIZE / 2), 0) / FONTSIZE) * -1;
+                return `
+		${mq[bp.breakpoint]} {
+		  ${isDifferent("font-family", fontFamily[style.responsive[idx - 1].fontFamily], fontFamily[bp.fontFamily])}
+		  ${isDifferent("font-size", style.responsive[idx - 1].fontSize, bp.fontSize)}
+		  ${isDifferent("font-weight", style.responsive[idx - 1].fontWeight, bp.fontWeight)}
+		  ${isDifferent("line-height", style.responsive[idx - 1].lineHeight, bp.lineHeight)}
+		  ${isDifferent("letter-spacing", style.responsive[idx - 1].letterSpacing, bp.letterSpacing)}
+		  ${isDifferent("font-style", style.responsive[idx - 1].fontStyle, bp.fontStyle)}
+		  ${isDifferent("text-transform", style.responsive[idx - 1].textTransform, bp.textTransform)}
+		  ${CROPTOP && CROPBOTTOM ? cropText(dynCropTop, dynCropBottom) : ""}
+		}
+	      `;
+              }
+            })
+            .join("")
+        : ""
+    }
+	  `;
+      // End
+    });
+
+    return textStyleObject;
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseBreakpoints = (theme) => {
+  try {
+    // return Object.fromEntries(Object.entries(theme.mediaquery.mediaqueries.map(bp => bp.minWidth).filter(Boolean)))
+    return theme.mediaquery.mediaqueries.map((bp) => bp.minWidth).filter(Boolean);
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseFontSizes = (theme) => {
+  try {
+    return [
+      ...new Set(
+        theme.textStyle.textStyles
+          .map((entry) => entry.fontSize)
+          .filter(Boolean)
+          .reverse()
+          .map((entry) => Number(entry.split("px")[0]))
+          .sort((a, b) => a - b)
+      ),
+    ];
+  } catch (e) {
+    return null;
+  }
+};
+
+const parseNegativeSpacing = (theme) => {
+  const getNegative = (v) => `-${v}`;
+  if (theme.spacing) {
+    if (Object.keys(theme.spacing).length) {
+      return Object.entries(theme.spacing).reduce(
+        (prev, [key, value]) => ({
+          ...prev,
+          [key]: typeof value === "string" ? getNegative(value) : undefined,
+        }),
+        {}
+      );
+    }
+  }
+};
+
+const parseHalfSpacing = (theme) => {
+  if (theme.spacing) {
+    if (Object.keys(theme.spacing).length) {
+      return Object.entries(theme.spacing).reduce(
+        (prev, [key, value]) => ({
+          ...prev,
+          [key]: typeof value === "string" ? halfUnit(value) : undefined,
+        }),
+        {}
+      );
+    }
+  }
+};
+
+const parseNegativeHalfSpacing = (theme) => {
+  const getNegative = (v) => `-${v}`;
+  if (theme.spacing) {
+    if (Object.keys(theme.spacing).length) {
+      return Object.entries(theme.spacing).reduce(
+        (prev, [key, value]) => ({
+          ...prev,
+          [key]: typeof value === "string" ? getNegative(halfUnit(value)) : undefined,
+        }),
+        {}
+      );
+    }
+  }
+};
+
+const parseTheme = (theme) => {
+  // Añadir también al parseo de temas todos los elementos que no necesiten ser
+  // paseados.
+
+  const color = parseColors(theme);
+  const gradient = parseGradients(theme);
+  const shadow = parseShadows(theme);
+  const mq = parseMediaqueries(theme);
+  const textStyle = parseTextStyles(theme);
+  const breakpoints = parseBreakpoints(theme);
+  const fontFamily = parseFontFamilies(theme);
+
+  // Breakpoints alias.
+  // De esta manera se pueden utilizar las props responsive así:
+  // <Text display={{small:"none", xlarge:"block"}} >...</Text>
+  try {
+    theme.mediaquery.mediaqueries.forEach((mq) => {
+      breakpoints[mq.label] = mq.minWidth;
+    });
+  } catch (e) {
+    //
+  }
+
+  const returnObject = {
+    ...theme,
+    fontFamily,
+    color,
+    colors: color,
+    gradient,
+    shadow,
+    mq,
+    textStyle,
+    breakpoints,
+    fontSizes: parseFontSizes(theme),
+    negateSpacing: parseNegativeSpacing(theme),
+    halfSpacing: parseHalfSpacing(theme),
+    negateHalfSpacing: parseNegativeHalfSpacing(theme),
+  };
+  return returnObject;
+};
+
+export { parseTheme };

package/src/helpers/schemas.tsx

@@ -6,10 +6,10 @@ import { pageSchemas } from "@ax/schemas";
 const allSchemas = { ...schemas.all, ...pageSchemas };
 
 const getSchema = (name: string) => allSchemas[name];
-const getDefaultSchema = (name: string) => allSchemas[name].default;
+const getDefaultSchema = (name: string) => (allSchemas[name] ? allSchemas[name].default : {});
 
 const getSchemaThumbnails = (name: string, theme?: string) => {
-  if (!allSchemas[name].thumbnails) return null;
+  if (!allSchemas[name]?.thumbnails) return null;
 
   return theme && allSchemas[name].thumbnails[theme] ? allSchemas[name].thumbnails[theme] : allSchemas[name].thumbnails;
 };

package/src/hooks/forms.tsx

@@ -63,7 +63,7 @@ const useIsDirty = (
 
   const prevContent = usePrevious(updatedValues, isSaved);
 
-  const hasChanged = () => {
+  const hasChanged = (): boolean => {
     if (prevContent && updatedValues) {
       const updatedValuesCloned = updatedValues && deepClone(updatedValues);
       const originalValuesCloned = prevContent && deepClone(prevContent);
@@ -74,6 +74,7 @@ const useIsDirty = (
 
       return hasChanged;
     }
+    return false;
   };
 
   const resetDirty = () => {

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -15,7 +15,7 @@ import { NavProvider } from "./context";
 import * as S from "./style";
 
 const NavMenu = (props: IProps) => {
-  const { location, setHistoryPush, logout, currentSiteInfo, siteLanguages, lang } = props;
+  const { location, setHistoryPush, logout, currentSiteInfo, siteLanguages, lang, categories } = props;
 
   const [isOpened, setIsOpened] = useState(false);
 
@@ -116,6 +116,12 @@ const NavMenu = (props: IProps) => {
 
   const isSitePublished = isSite && currentSiteInfo && currentSiteInfo.isPublished;
 
+  if (isSite) {
+    const isSiteCategoriesAvailable = categories.site.length;
+    const siteCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/sites/categories");
+    config.routes[siteCategoriesRouteIdx].showInNav = isSiteCategoriesAvailable;
+  }
+
   return (
     <NavProvider value={{ state, toggleSubmenu }}>
       <S.NavWrapper type={config.type} isOpened={isOpened}>
@@ -182,12 +188,14 @@ interface IConfig {
 }
 
 interface INavMenuProps {
+  categories: any;
   currentSiteInfo: any;
   siteLanguages: any[];
   lang: any;
 }
 
 const mapStateToProps = (state: IRootState) => ({
+  categories: state.structuredData.categories,
   currentSiteInfo: state.sites.currentSiteInfo,
   siteLanguages: state.sites.currentSiteLanguages,
   lang: state.app.lang,

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -94,7 +94,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           {CategoryColumns}
           {activeColumns.includes("type") && (
             <S.HeaderWrapper>
-              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.types} pointer="type" />
+              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.type} pointer="type" />
             </S.HeaderWrapper>
           )}
           {activeColumns.includes("live") && (

package/src/modules/Content/hooks.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {
@@ -21,7 +21,7 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = () => {
+const useFilterQuery = (values?: Record<string, string> | null) => {
   const initialQueryValues = {
     type: "all",
     translated: "all",
@@ -30,9 +30,7 @@ const useFilterQuery = () => {
     categories: "all",
   };
 
-  const [query, setQuery] = useState(initialQueryValues);
-
-  const setFilterQuery = (filterValues: any) => {
+  const getFilterQuery = (filterValues: any) => {
     const { type, translated, liveStatus, order, categories } = filterValues;
     let filterQuery = "";
 
@@ -63,8 +61,14 @@ const useFilterQuery = () => {
     return filterQuery;
   };
 
+  const initState = values ? values : initialQueryValues;
+  const [state, setState] = useState(initState);
+
+  const initQuery = values ? getFilterQuery(values) : "";
+  const [query, setQuery] = useState(initQuery);
+
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { type, translated, liveStatus, order, categories } = query;
+    const { type, translated, liveStatus, order, categories } = state;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       type: pointer === "type" ? filter : type,
@@ -74,18 +78,21 @@ const useFilterQuery = () => {
       categories: pointer === "categories" ? filter : categories,
     };
 
-    setQuery(filterValues);
-
-    return filterValues;
+    setState(filterValues);
+    const filterQuery = getFilterQuery(filterValues);
+    setQuery(filterQuery);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setState(initialQueryValues);
+    setQuery("");
+  };
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
-    filterValues: query,
+    filterValues: state,
+    query,
   };
 };