@griddo/ax 1.69.7 → 1.71.0

package/config/jest/componentsMock.js

@@ -1501,30 +1501,4 @@ module.exports = {
       },
     },
   },
-  parseTheme: (theme) => {
-    const color = "#000";
-    const gradient = "#000";
-    const shadow = "#000";
-    const mq = "#000";
-    const textStyle = "#000";
-    const breakpoints = "#000";
-    const fontFamily = "#000";
-
-    const returnObject = {
-      ...theme,
-      fontFamily,
-      color,
-      colors: color,
-      gradient,
-      shadow,
-      mq,
-      textStyle,
-      breakpoints,
-      fontSizes: "#000",
-      negateSpacing: "#000",
-      halfSpacing: "#000",
-      negateHalfSpacing: "#000",
-    };
-    return returnObject;
-  },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.69.7",
+  "version": "1.71.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -94,6 +94,7 @@
     "find-up": "^5.0.0",
     "fs-extra": "7.0.1",
     "html-to-draftjs": "^1.5.0",
+    "html-to-image": "^1.9.0",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
     "ignore-loader": "^0.1.2",
@@ -133,7 +134,7 @@
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
     "redux-persist": "6.0.0",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "^2.4.1",
     "reflect-metadata": "0.1.13",
     "resolve": "^1.20.0",
     "resolve-url-loader": "^4.0.0",
@@ -225,5 +226,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dfd7c5eb42d534428fe09d3b4ab5a815d6829692"
+  "gitHead": "3ccc775d807b8e42ca60b1e5f17ebe92b97e4f59"
 }

package/src/__tests__/components/ElementsTooltip/ElementsTooltip.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { render, screen, cleanup } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mock } from "jest-mock-extended";
+
+import { parseTheme } from "@griddo/core";
+
+import ElementsTooltip, { IElementsTooltipProps } from "@ax/components/ElementsTooltip";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IElementsTooltipProps>();
+
+describe("Tooltip component rendering", () => {
+  it("should not render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsTooltipWrapper = screen.queryByTestId("elements-wrapper");
+
+    expect(elementsTooltipWrapper).not.toBeTruthy();
+  });
+
+  it("should render the component with one element visible", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.colors = { uno: "#fff" };
+    defaultProps.rounded = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsWrapper = screen.findByTestId("elements-wrapper");
+    const element = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+    const divElement = screen.queryAllByTestId("div-element");
+    const rowElement = screen.queryAllByTestId("row-element");
+
+    expect(elementsWrapper).toBeTruthy();
+    expect(element).toHaveLength(1);
+    expect(remainingElements).toHaveTextContent("+2");
+    expect(divElement).toHaveLength(3);
+    expect(rowElement).toHaveLength(3);
+  });
+
+  it("should render the component with three elements visibles", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.defaultElements = 3;
+    defaultProps.maxChar = 1;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsTooltipWrapper = screen.findByTestId("elements-wrapper");
+    const elementTooltip = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+
+    expect(elementsTooltipWrapper).toBeTruthy();
+    expect(elementTooltip).toHaveLength(3);
+    expect(remainingElements).toBeNull();
+  });
+
+  it("should render the component with one row", () => {
+    defaultProps.elements = ["uno", "dos", "tres"];
+    defaultProps.defaultElements = 1;
+    defaultProps.elementsPerRow = 3;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ElementsTooltip {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const elementsWrapper = screen.findByTestId("elements-wrapper");
+    const element = screen.queryAllByTestId("element");
+    const remainingElements = screen.queryByTestId("remaining-element");
+    const divElement = screen.queryAllByTestId("div-element");
+    const rowElement = screen.queryAllByTestId("row-element");
+
+    expect(elementsWrapper).toBeTruthy();
+    expect(element).toHaveLength(1);
+    expect(remainingElements).toHaveTextContent("+2");
+    expect(divElement).toHaveLength(3);
+    expect(rowElement).toHaveLength(1);
+  });
+});

package/src/__tests__/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { parseTheme } from "@griddo/core";
+import "@testing-library/jest-dom";
+
+import EmptyState from "@ax/components/EmptyState";
+import { IEmptyStateProps } from "@ax/types";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IEmptyStateProps>();
+
+describe("EmptyState component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("Oh! This Looks so empty");
+  });
+
+  it("should render the component with title", () => {
+    defaultProps.title = "The title";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("The title");
+  });
+
+  it("should render the component with message", () => {
+    defaultProps.message = "A message";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("A message");
+  });
+});
+
+describe("EmptyState component events", () => {
+  it("should trigger the onClick", () => {
+    const actionFunc = jest.fn();
+    defaultProps.button = "A button";
+    defaultProps.action = actionFunc;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <EmptyState {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const emptyStateWrapper = screen.getByTestId("wrapper");
+    const buttonComponent = screen.getByTestId("button-line-inverse");
+
+    expect(emptyStateWrapper).toBeTruthy();
+    expect(buttonComponent).toBeTruthy();
+    expect(emptyStateWrapper).toHaveTextContent("A button");
+    fireEvent.click(buttonComponent);
+    expect(actionFunc).toBeCalled();
+  });
+});

package/src/__tests__/components/Fields/AnalyticsField/PageAnalytics/PageAnalytics.test.tsx

@@ -188,17 +188,3 @@ describe("PageAnalytics component rendering", () => {
     expect(getAllByText(/Select Dimensions/i)).toHaveLength(2);
   });
 });
-
-export interface IAnalyticsFieldProps {
-  value: IState;
-  template: string;
-  onChange: (value: IState) => void;
-  analytics: IAnalytics;
-}
-
-export interface IState {
-  contentSelect: string;
-  groupSelect: string;
-  dimensionsSelect: string[];
-  values: Record<string, string>;
-}

package/src/__tests__/components/Fields/AnalyticsField/StructuredDataAnalytics/StructuredDataAnalytics.test.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import StructuredDataAnalytics from "@ax/components/Fields/AnalyticsField/StructuredDataAnalytics";
-import { IAnalytics } from "@ax/types";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -130,17 +129,3 @@ describe("StructuredDataAnalytics component rendering", () => {
     expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
   });
 });
-
-export interface IAnalyticsFieldProps {
-  value: IState;
-  template: string;
-  onChange: (value: IState) => void;
-  analytics: IAnalytics;
-}
-
-export interface IState {
-  contentSelect: string;
-  groupSelect: string;
-  dimensionsSelect: string[];
-  values: Record<string, string>;
-}

package/src/__tests__/components/Fields/ArrayFieldGroup/ArrayFieldGroup.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ArrayFieldGroup from "@ax/components/Fields/ArrayFieldGroup";
+import ArrayFieldGroup, { IProps } from "@ax/components/Fields/ArrayFieldGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -21,7 +21,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
   });
 
   it("should render the component with ArrayFieldInline", async () => {
@@ -71,7 +71,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
     expect(screen.getByTestId("arrayFieldInline")).toBeTruthy();
 
     const fieldProps2 = {
@@ -147,7 +147,7 @@ describe("ArrayFieldGroup component rendering", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
     expect(screen.getByTestId("arrayFieldItem")).toBeTruthy();
 
     const fieldProps2 = {
@@ -209,8 +209,8 @@ describe("ArrayFieldGroup component events", () => {
       );
     });
 
-    expect(screen.getByTestId("buttonLineInverse")).toBeTruthy();
-    fireEvent.click(screen.getByTestId("buttonLineInverse"));
+    expect(screen.getByTestId("button-line-inverse")).toBeTruthy();
+    fireEvent.click(screen.getByTestId("button-line-inverse"));
     expect(onChangeMock).toHaveBeenCalled();
   });
 
@@ -266,12 +266,3 @@ describe("ArrayFieldGroup component events", () => {
     expect(onChangeMock).toHaveBeenCalled();
   });
 });
-
-interface IProps {
-  value: Record<string, unknown>[];
-  name: string;
-  onChange: (value: Record<string, unknown>[]) => void;
-  innerFields: any[];
-  divider: { title: string; text: string };
-  arrayType: string;
-}

package/src/__tests__/components/Fields/AsyncCheckGroup/AsyncCheckGroup.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import axios from "axios";
-import AsyncCheckGroup from "@ax/components/Fields/AsyncCheckGroup";
+import AsyncCheckGroup, { IAsyncCheckGroup } from "@ax/components/Fields/AsyncCheckGroup";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -94,15 +94,3 @@ describe("AsyncCheckGroup component rendering", () => {
     expect(screen.queryByTestId("checkFieldLabel")).not.toBeTruthy();
   });
 });
-
-interface IAsyncCheckGroup {
-  value: any[];
-  site?: ISite | null;
-  source: string;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-  error?: boolean;
-  handleValidation?: (value: string | any[]) => void;
-  validators?: Record<string, unknown>;
-  fullHeight?: boolean;
-}

package/src/__tests__/components/Fields/AsyncSelect/AsyncSelect.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import axios from "axios";
 import "@testing-library/jest-dom";
-import AsyncSelect from "@ax/components/Fields/AsyncSelect";
+import AsyncSelect, { IAsyncSelectProps } from "@ax/components/Fields/AsyncSelect";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -286,21 +286,3 @@ describe("AsyncSelect component events", () => {
     expect(screen.getByTestId("asyncSelect")).toHaveTextContent("English test");
   });
 });
-
-interface IAsyncSelectProps {
-  name: string;
-  value: any;
-  entity?: string;
-  entityId?: string | number;
-  error?: boolean;
-  disabled?: boolean;
-  onChange: (value: string) => void;
-  site: ISite;
-  lang: string;
-  selectedContent: any;
-  mandatory?: boolean;
-  placeholder?: string;
-  filter?: any[];
-  options?: any;
-  source?: string;
-}

package/src/__tests__/components/Fields/ColorPicker/ColorPicker.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import ColorPicker from "@ax/components/Fields/ColorPicker";
+import ColorPicker, { IProps } from "@ax/components/Fields/ColorPicker";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -184,12 +184,3 @@ describe("AsyncSelect events", () => {
     expect(handleValidationMock).toBeCalled();
   });
 });
-
-export interface IProps {
-  value: string;
-  error?: boolean;
-  colors?: string[] | Record<string, unknown>[];
-  onChange: (newColor: string) => void;
-  handleValidation?: (value: string, validators: Record<string, unknown>) => void;
-  theme: string;
-}

package/src/__tests__/components/Fields/ComponentArray/ComponentArray.test.tsx

@@ -5,6 +5,7 @@ import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
 import { IModule } from "@ax/types";
 import { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
+import { IMixableComponentArrayProps } from "@ax/components/Fields/ComponentArray/MixableComponentArray";
 import { render, screen, cleanup } from "@testing-library/react";
 import { mock } from "jest-mock-extended";
 
@@ -160,25 +161,3 @@ describe("ComponentArraySelector component rendering", () => {
     expect(screen.getAllByTestId("sameComponentWrapper")).toBeTruthy();
   });
 });
-
-export interface IMixableComponentArrayProps {
-  maxItems: number;
-  title: string;
-  whiteList: any[];
-  value: IModule[];
-  selectedContent: any;
-  editorID: number;
-  goTo: (editorID: string) => void;
-  actions: any;
-  categories?: any;
-  disabled?: boolean;
-  activatedModules: string[];
-  objKey: string;
-  field: any;
-  mandatory?: boolean;
-  theme: string;
-  moduleCopy: { date: string; element: Record<string, any> } | null;
-  availableDataPacks: Record<string, any>[];
-  template: any;
-  setHistoryPush?: (path: string, isEditor: boolean) => void;
-}

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/MixableComponentArray.test.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
-import MixableComponentArray from "@ax/components/Fields/ComponentArray/MixableComponentArray";
+import MixableComponentArray, {
+  IMixableComponentArrayProps,
+} from "@ax/components/Fields/ComponentArray/MixableComponentArray";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -232,7 +234,7 @@ describe("ComponentArraySelector component rendering", () => {
       </ThemeProvider>
     );
 
-    expect(screen.getAllByTestId("tooltipComponent")).toBeTruthy();
+    expect(screen.getAllByTestId("tooltip-component")).toBeTruthy();
   });
 });
 
@@ -291,25 +293,3 @@ describe("ComponentArraySelector component events trigger", () => {
     expect(mixableProps.actions.addComponentAction).toBeCalled();
   });
 });
-
-export interface IMixableComponentArrayProps {
-  maxItems: number;
-  title: string;
-  whiteList: any[];
-  value: IModule[];
-  selectedContent: any;
-  editorID: number;
-  goTo: (editorID: string) => void;
-  actions: any;
-  categories?: any;
-  disabled?: boolean;
-  activatedModules: string[];
-  objKey: string;
-  field: any;
-  mandatory?: boolean;
-  theme: string;
-  moduleCopy: { date: string; element: Record<string, any> } | null;
-  availableDataPacks: Record<string, any>[];
-  template: any;
-  setHistoryPush?: (path: string, isEditor: boolean) => void;
-}

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
-import PasteModuleButton from "@ax/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton";
+import PasteModuleButton, {
+  IProps,
+} from "@ax/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import "@testing-library/jest-dom";
@@ -64,7 +66,7 @@ describe("ComponentArraySelector trigger events", () => {
       },
     });
 
-    expect(screen.getByTestId("tooltipComponent")).toHaveTextContent("Paste from clipboard");
+    expect(screen.getByTestId("tooltip-component")).toHaveTextContent("Paste from clipboard");
   });
 
   test("should trigger the onClick and resolve promise", async () => {
@@ -83,7 +85,7 @@ describe("ComponentArraySelector trigger events", () => {
     });
     await expect(mockedFunction).toHaveBeenCalled();
     await expect(mockedFunction(1)).resolves.toEqual({});
-    expect(screen.getByTestId("toastMessage")).toHaveTextContent("Module pasted from clipboard");
+    expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 
   test("should trigger the onClick and resolve promise without error", async () => {
@@ -102,14 +104,6 @@ describe("ComponentArraySelector trigger events", () => {
     });
     await expect(mockedFunction).toHaveBeenCalled();
     await expect(mockedFunction(1)).resolves.toEqual({ error: undefined });
-    expect(screen.getByTestId("toastMessage")).toHaveTextContent("Module pasted from clipboard");
+    expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
   });
 });
-
-interface IProps {
-  pasteModule: (editorID: number) => Promise<{ error?: INotification }>;
-  setNotification?: (notification: INotification) => void;
-  setHistoryPush?: (path: string, isEditor: boolean) => void;
-  editorID: number;
-  isModuleCopyUnavailable: boolean;
-}

package/src/__tests__/components/Fields/ComponentArray/SameComponentArray/SameComponentArray.test.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import SameComponentArray from "@ax/components/Fields/ComponentArray/SameComponentArray";
+import SameComponentArray, { ISameComponentArrayProps } from "@ax/components/Fields/ComponentArray/SameComponentArray";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
 import globalTheme from "@ax/themes/theme.json";
@@ -204,22 +204,3 @@ describe("ComponentArraySelector component events trigger", () => {
     expect(sameProps.actions.addComponentAction).toBeCalled();
   });
 });
-
-export interface ISameComponentArrayProps {
-  maxItems: number;
-  title: string;
-  whiteList: string[];
-  value: IModule[];
-  elementUniqueSelection: boolean;
-  selectedContent: any;
-  editorID: number;
-  goTo: (editorID: string) => void;
-  actions: any;
-  categories?: any;
-  disabled?: boolean;
-  activatedModules: string[];
-  objKey: string;
-  field: any;
-  mandatory?: boolean;
-  theme: string;
-}