@griddo/ax 1.49.42 → 1.51.2

package/README.md

@@ -1 +1,7 @@
 # Griddo AX
+
+Panel de Administración de Griddo.
+
+# Arrancar el entorno de desarrollo
+
+Ejecuta `yarn start:dev` en la raíz de este paquete o en la raíz del monorepo.

package/config/griddo-config.js

@@ -3,12 +3,12 @@ const findUp = require("find-up");
 
 const pkgDir = require("pkg-dir");
 
-const isComponentLibraryEnv = process.env.IS_COMPONENT_LIBRARY;
+const isComponentLibraryEnv = __dirname.includes("node_modules");
 
 const resolveComponentsPath = (customPath = "") =>
   isComponentLibraryEnv
     ? path.resolve(pkgDir.sync(process.cwd()), customPath)
-    : path.resolve(pkgDir.sync(__dirname), "../../components", customPath);
+    : path.resolve(pkgDir.sync(__dirname), "../griddo-components", customPath);
 
 const getComponentsJSConfig = () => {
   const jsConfigPath = findUp.sync("jsconfig.json", { cwd: resolveComponentsPath() });

package/config/webpack.config.js

@@ -39,9 +39,6 @@ const reactRefreshOverlayEntry = require.resolve("react-dev-utils/refreshOverlay
 // makes for a smoother build process.
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
 
-const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true";
-const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === "true";
-
 const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || "10000");
 
 // Check if TypeScript is setup

package/config/webpackSchemas.config.js

@@ -15,6 +15,20 @@ const createConfig = ({ input, output }) => ({
     },
   },
   plugins: [new webpack.ProgressPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+    ],
+  },
 });
 
 module.exports = (withExternalConfig) => {
@@ -29,6 +43,10 @@ module.exports = (withExternalConfig) => {
         return reject(err);
       }
 
+      if (stats.compilation.errors && stats.compilation.errors.length) {
+        return reject(stats.compilation.errors[0]);
+      }
+
       return resolve({
         stats,
       });

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.49.42",
+  "version": "1.51.2",
+  "authors": [
+    "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
+    "Carlos Torres <carlos.torres@secuoyas.com>",
+    "Diego Béjar <diego.bejar@secuoyas.com>",
+    "Francis Vega <francis.vega@secuoyas.com>",
+    "Gonzalo Hernández <gonzalo.hernandez@secuoyas.com>",
+    "Sergio Ródenas <sergio.rodenas@secuoyas.com>",
+    "Txema León <txema.leon@secuoyas.com>"
+  ],
+  "homepage": "https://griddo.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/griddo/griddo"
+  },
   "bin": {
     "griddo": "./scripts/griddo.js",
     "griddo-sync-schemas": "./scripts/griddo-sync-schemas.js"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "start": "npm run start:dev",
     "start:local": "env-cmd -f env/.env.local node scripts/start.js",
@@ -22,17 +33,10 @@
     "format": "prettier -w .",
     "start:test": "env-cmd -f env/.env.development node scripts/dev.js"
   },
-  "files": [
-    "config",
-    "public",
-    "scripts",
-    "src",
-    "tsconfig.json",
-    "tsconfig.paths.json"
-  ],
   "dependencies": {
     "@atlaskit/tree": "^8.2.0",
     "@babel/core": "7.14.2",
+    "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0",
     "@styled-system/prop-types": "5.1.2",
@@ -54,6 +58,7 @@
     "@types/react-test-renderer": "16.9.1",
     "@types/react-textarea-autosize": "^4.3.5",
     "@types/styled-components": "4.1.19",
+    "@types/uuid": "^8.3.1",
     "@types/webpack-env": "^1.14.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",
@@ -68,7 +73,7 @@
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "compress.js": "^1.1.2",
     "connected-react-router": "6.5.2",
-    "css-loader": "4.3.0",
+    "css-loader": "^4.3.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "date-fns": "^2.21.3",
     "dotenv": "6.2.0",
@@ -114,17 +119,18 @@
     "reflect-metadata": "0.1.13",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^8.0.2",
     "semver": "^7.3.5",
     "source-map-loader": "^1.1.2",
     "string-replace-loader": "^3.0.1",
-    "style-loader": "1.0.0",
+    "style-loader": "^1.2.1",
     "styled-components": "^4.4.1",
     "styled-reset": "4.0.1",
     "terser-webpack-plugin": "1.4.1",
     "ts-pnp": "1.1.4",
     "typescript": "~3.8",
     "url-loader": "^4.1.1",
+    "uuid": "^8.3.2",
     "webpack": "4.44.2",
     "webpack-dev-server": "3.11.1",
     "webpack-manifest-plugin": "2.2.0",
@@ -145,9 +151,11 @@
     "prettier": "^2.3.0",
     "react-test-render": "1.1.2"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+  "babel": {
+    "presets": [
+      "react-app",
+      "@babel/preset-react"
+    ]
   },
   "browserslist": {
     "production": [
@@ -161,6 +169,14 @@
       "last 1 safari version"
     ]
   },
+  "files": [
+    "config",
+    "public",
+    "scripts",
+    "src",
+    "tsconfig.json",
+    "tsconfig.paths.json"
+  ],
   "jest": {
     "roots": [
       "<rootDir>/src"
@@ -209,11 +225,12 @@
       "jest-watch-typeahead/testname"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app",
-      "@babel/preset-react"
-    ]
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "gitHead": "a601c4449b08e03c47e72248115633ea3267e9b7"
+  "gitHead": "137fb5810ec6523db7745a43f77e47484611441b"
 }

package/scripts/griddo-sync-schemas.js

@@ -5,6 +5,7 @@ const axios = require("axios");
 const chalk = require("chalk");
 const dotenv = require("dotenv");
 const path = require("path");
+const fs = require("fs");
 const compiler = require("../config/webpackSchemas.config");
 
 const { resolveComponentsPath } = require("../config/griddo-config");
@@ -21,10 +22,30 @@ async function main() {
   console.clear();
   const tempFile = "__griddo_config_parsed__.js";
 
-  await compiler({
-    input: resolveComponentsPath("griddo.config.js"),
-    output: { filename: tempFile, path: __dirname },
-  });
+  const inputFile = resolveComponentsPath("griddo.config.js");
+  const outputFile = `${__dirname}/${tempFile}`;
+
+  if (fs.existsSync(outputFile)) {
+    fs.unlinkSync(outputFile);
+  }
+
+  try {
+    if (!fs.existsSync(inputFile)) {
+      throw new Error(`Source schemas config not found: ${inputFile}`);
+    }
+
+    await compiler({
+      input: resolveComponentsPath("griddo.config.js"),
+      output: { filename: tempFile, path: __dirname },
+    });
+
+    if (!fs.existsSync(outputFile)) {
+      throw new Error(`Unknown error when parsing ${inputFile}`);
+    }
+  } catch (err) {
+    console.log(`\n${chalk.red("ERROR:")} ${err.message}\n`);
+    process.exit(1);
+  }
 
   const _griddoConfig = require(path.resolve(__dirname, `./${tempFile}`));
   const griddoConfig = _griddoConfig.default || _griddoConfig;
@@ -48,11 +69,12 @@ async function main() {
       method: API_METHOD,
       data: { version, ...emptySchemas, ...griddoConfig.schemas },
     });
-    console.log(res);
+    // console.log(res);
     const data = await res?.json?.();
-    console.log(data);
+    // console.log(data);
   } catch (e) {
     console.log(chalk.red("ERROR:"), e.response?.data?.message || e.response || e.message);
+    process.exit(1);
   }
 }
 

package/scripts/griddo.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-process.env.IS_COMPONENT_LIBRARY = true;
 
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will

package/src/api/sites.tsx

@@ -156,9 +156,9 @@ const getGlobalPages = async (params: IGetGlobalPagesParams, filterQuery?: strin
 const getGlobalPagesLight = async (params: IGetGlobalPagesParams): Promise<AxiosResponse> => {
   const { host, endpoint } = SERVICES.GET_GLOBAL_PAGES_LIGHT;
 
-  const { deleted, page, itemsPerPage, query, filterStructuredData, excludeSite } = params;
+  const { deleted, page, itemsPerPage, query, filterStructuredData, excludeSite, liveStatus } = params;
 
-  SERVICES.GET_GLOBAL_PAGES_LIGHT.dynamicUrl = `${host}${endpoint}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&excludeSite=${excludeSite}`;
+  SERVICES.GET_GLOBAL_PAGES_LIGHT.dynamicUrl = `${host}${endpoint}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&excludeSite=${excludeSite}&liveStatus=${liveStatus}`;
 
   if (query && query.trim() !== "") SERVICES.GET_GLOBAL_PAGES_LIGHT.dynamicUrl += `&query=${query}`;
   if (filterStructuredData)

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -28,10 +28,11 @@ const Field = (props: IProps): JSX.Element => {
 
   const isGroup = field.type === "FieldGroup";
   const isConditional = field.type === "ConditionalField";
+  const isArrayGroup = field.type === "ArrayFieldGroup";
 
   let innerFields: JSX.Element[] = [];
 
-  if (isGroup || isConditional) {
+  if (isGroup || isConditional || isArrayGroup) {
     const innerActions = { ...actions, updateValue, goTo };
     innerFields = getInnerFields(field.fields, innerActions, selectedContent, isTemplateActivated, errors, deleteError);
   }

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -13,7 +13,10 @@ const GlobalPageForm = (props: IProps): JSX.Element => {
   const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions } = props;
   const tabs = ["content", "config"];
 
-  const handleGetGlobalPage = async () => await actions.getGlobalFromLocalPageAction();
+  const handleGetGlobalPage = async () => {
+    actions.saveCurrentSiteInfoAction();
+    await actions.getGlobalFromLocalPageAction();
+  };
 
   const handleClick = async () => {
     await handleGetGlobalPage();
@@ -67,7 +70,10 @@ interface IProps {
   schema: ISchema;
   pageTitle?: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
-  actions: { getGlobalFromLocalPageAction(): Promise<void> };
+  actions: {
+    getGlobalFromLocalPageAction(): Promise<void>;
+    saveCurrentSiteInfoAction(): Promise<void>;
+  };
 }
 
 export default GlobalPageForm;

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

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { IconAction } from "@ax/components";
+
+import * as S from "./style";
+
+const ArrayFieldInline = (props: IProps): JSX.Element => {
+  const { fields, item, index, onChange, handleDelete } = props;
+
+  const deleteItem = () => {
+    handleDelete(index);
+  };
+
+  return (
+    <S.Wrapper>
+      <S.Content>
+        <S.IconWrapper>
+          <IconAction icon="delete" onClick={deleteItem} size="s" />
+        </S.IconWrapper>
+        {fields.map((field: any) => {
+          const key = field.props.objKey;
+          const handleChange = (newValue: any) => onChange({ [key]: newValue });
+
+          return {
+            ...field,
+            props: { ...field.props, value: item[key], objKey: key, onChange: handleChange },
+            key,
+          };
+        })}
+      </S.Content>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  fields: any[];
+  item: Record<string, unknown>;
+  index: number;
+  onChange: (value: Record<string, unknown>) => void;
+  handleDelete: (index: number) => void;
+}
+
+export default ArrayFieldInline;

package/src/components/Fields/ArrayFieldGroup/ArrayFieldInline/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Content = styled.div`
+  position: relative;
+  display: flex;
+
+  & > div {
+    margin-right: ${(p) => p.theme.spacing.m};
+
+    &:last-child,
+    &:first-child {
+      margin-right: 0;
+    }
+  }
+`;
+
+const IconWrapper = styled.div`
+  position: absolute;
+  top: -2px;
+  right: 10px;
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  z-index: 99;
+`;
+
+export { Wrapper, Content, IconWrapper };

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

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+import * as S from "./style";
+
+const ArrayFieldItem = (props: IProps): JSX.Element => {
+  const { fields, item, name, index, onChange, handleDelete } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => setIsOpen(!isOpen);
+
+  const deleteItem = () => {
+    handleDelete(index);
+  };
+
+  const menuOptions = [
+    {
+      label: "Delete",
+      icon: "delete",
+      action: deleteItem,
+    },
+  ];
+
+  return (
+    <S.Wrapper isOpen={isOpen}>
+      <S.Title onClick={handleClick} isOpen={isOpen}>
+        {`${name} ${index + 1}`}
+        <S.StyledActionMenu icon="more" options={menuOptions} />
+      </S.Title>
+      <S.Content isOpen={isOpen}>
+        {fields.map((field: any) => {
+          const key = field.props.objKey;
+          const handleChange = (newValue: any) => onChange({ [key]: newValue });
+
+          return {
+            ...field,
+            props: { ...field.props, value: item[key], objKey: key, onChange: handleChange },
+            key,
+          };
+        })}
+      </S.Content>
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  name: string;
+  fields: any[];
+  item: Record<string, unknown>;
+  index: number;
+  onChange: (value: Record<string, unknown>) => void;
+  handleDelete: (index: number) => void;
+}
+
+export default ArrayFieldItem;

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/style.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import ActionMenu from "@ax/components/ActionMenu";
+
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  border: 1px solid ${(p) => (p.isOpen ? p.theme.color.interactive01 : p.theme.color.uiLine)};
+  border-radius: ${(p) => p.theme.radii.s};
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  width: ${(p) => p.theme.spacing.m};
+  height: ${(p) => p.theme.spacing.m};
+  display: flex;
+  margin-left: auto;
+`;
+
+const Title = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  display: flex;
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  padding: ${(p) => p.theme.spacing.s};
+  cursor: pointer;
+  text-transform: capitalize;
+  align-items: center;
+  width: 100%;
+  :after {
+    position: absolute;
+    right: 55px;
+    top: ${(p) => (p.isOpen ? `28px` : `24px`)};
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg)` : `rotate(45deg)`)};
+  }
+`;
+
+const Content = styled.div<{ isOpen: boolean }>`
+  overflow-y: hidden;
+  max-height: ${(p) => (p.isOpen ? `auto` : 0)};
+  transition: all 0.5s ease-in-out;
+  padding: ${(p) => `0 ${p.theme.spacing.s}`};
+`;
+
+export { Wrapper, Title, Content, StyledActionMenu };

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

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import { Button, FieldsDivider } from "@ax/components";
+import ArrayFieldItem from "./ArrayFieldItem";
+import ArrayFieldInline from "./ArrayFieldInline";
+
+const ArrayFieldGroup = (props: IProps): JSX.Element => {
+  const { value, name, innerFields, onChange, divider, arrayType } = props;
+
+  const initialValue = value ? Object.values(value) : [];
+  const initialValueMapped = initialValue.map((val: any) => {
+    return val.id ? val : { id: uuidv4(), ...val };
+  });
+
+  const [items, setItems] = useState(initialValueMapped);
+
+  const handleClick = () => {
+    const newItems = [...items, { id: uuidv4() }];
+    setItems(newItems);
+    onChange(newItems);
+  };
+
+  const handleChange = (newValue: Record<string, unknown>, index: number) => {
+    const updatedItems = [...items];
+    updatedItems[index] = {
+      ...updatedItems[index],
+      ...newValue,
+    };
+    setItems(updatedItems);
+    onChange(updatedItems);
+  };
+
+  const handleDelete = (index: number) => {
+    const updatedItems = [...items];
+    updatedItems.splice(index, 1);
+    setItems(updatedItems);
+    onChange(updatedItems);
+  };
+
+  const DividerComponent = () => (divider ? <FieldsDivider data={divider} /> : null);
+
+  return (
+    <div>
+      <DividerComponent />
+      <div>
+        {items &&
+          items.map((item: any, index: number) => {
+            const handleFieldChange = (newValue: Record<string, unknown>) => handleChange(newValue, index);
+
+            return arrayType === "inline" ? (
+              <ArrayFieldInline
+                key={item.id}
+                fields={innerFields}
+                item={item}
+                index={index}
+                onChange={handleFieldChange}
+                handleDelete={handleDelete}
+              />
+            ) : (
+              <ArrayFieldItem
+                key={item.id}
+                name={name}
+                fields={innerFields}
+                item={item}
+                index={index}
+                onChange={handleFieldChange}
+                handleDelete={handleDelete}
+              />
+            );
+          })}
+      </div>
+      <div>
+        <Button type="button" onClick={handleClick} buttonStyle="line">
+          {`Add ${name}`}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface IProps {
+  value: Record<string, unknown>[];
+  name: string;
+  onChange: (value: Record<string, unknown>[]) => void;
+  innerFields: any[];
+  divider: { title: string; text: string };
+  arrayType: string;
+}
+
+export default ArrayFieldGroup;

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -4,7 +4,7 @@ import { IModule } from "@ax/types";
 import { ComponentContainer } from "@ax/components";
 
 import AddItemButton from "./AddItemButton";
-import { getComponentProps, containerToComponentArray } from "../helpers";
+import { getComponentProps, containerToComponentArray, getTypefromKey } from "../helpers";
 
 import * as S from "./style";
 
@@ -21,8 +21,13 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     maxItems,
     disabled,
     activatedModules,
+    objKey,
+    field,
   } = props;
 
+  const type = getTypefromKey(objKey);
+  const { contentType = type } = field;
+
   let addModuleAction: any;
   let addComponentAction: any;
 
@@ -38,14 +43,12 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
   };
 
-  const { elements, componentModules } = selectedContent;
-
-  const isComponentModule = !!componentModules;
-  const isModuleArr = !elements && !isComponentModule;
+  const isComponentModule = contentType === "components";
+  const isModuleArr = contentType === "modules";
 
   const handleAddModule = (moduleType: string) => addModuleAction(moduleType, editorID, isComponentModule);
 
-  const handleAddComponent = (componentType: string) => addComponentAction && addComponentAction(componentType);
+  const handleAddComponent = (componentType: string) => addComponentAction && addComponentAction(componentType, objKey);
 
   const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
@@ -90,6 +93,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               selectedContent={selectedContent}
               disabled={disabled}
               canDuplicate={showAddItemButton && !isModuleDeactivated}
+              parentKey={objKey}
             />
           );
         })}
@@ -109,6 +113,8 @@ export interface IMixableComponentArrayProps {
   categories?: any;
   disabled?: boolean;
   activatedModules: string[];
+  objKey: string;
+  field: any;
 }
 
 export default MixableComponentArray;