@griddo/ax 11.4.23 → 11.4.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.23",
+  "version": "11.4.24",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -39,7 +39,8 @@
     "start:test": "env-cmd -f env/.env.development node scripts/dev.js"
   },
   "dependencies": {
-    "@atlaskit/tree": "8.12.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
     "@styled-system/prop-types": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
@@ -112,7 +113,6 @@
     "postcss-safe-parser": "6.0.0",
     "react": "18.2.0",
     "react-app-polyfill": "1.0.6",
-    "react-beautiful-dnd": "13.1.1",
     "react-datepicker": "4.25.0",
     "react-dev-utils": "11.0.4",
     "react-dom": "18.2.0",
@@ -224,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cf077509fbb1fcc3cd5656b43f8b4043fdaef0f4"
+  "gitHead": "6ab8d7009d1dceabebdf975dc5bef4e3013d8624"
 }

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

@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { DraggableProvided, Draggable } from "react-beautiful-dnd";
 import { ThemeProvider } from "styled-components";
 import { mock } from "jest-mock-extended";
 
@@ -13,16 +12,6 @@ import ComponentContainer, { IComponentContainerProps } from "@ax/components/Fie
 afterEach(cleanup);
 const defaultProps = mock<IComponentContainerProps>();
 
-jest.mock("react-beautiful-dnd", () => ({
-  Draggable: ({ children, draggableId, index }: any) =>
-    children(
-      {
-        innerRef: jest.fn(),
-      },
-      {}
-    ),
-}));
-
 describe("ComponentContainer component rendering", () => {
   afterEach(() => {
     jest.resetAllMocks();
@@ -31,16 +20,13 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.text = "texto";
     defaultProps.editorID = 1;
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.goTo = "/home";
     defaultProps.arrayLength = 10;
     defaultProps.theme = "default";
     defaultProps.isArray = true;
     defaultProps.disabled = false;
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
 
@@ -54,7 +40,6 @@ describe("ComponentContainer component rendering", () => {
     // @ts-ignore
     defaultProps.editorID = undefined;
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.arrayLength = 10;
     defaultProps.theme = "default";
@@ -141,7 +126,6 @@ describe("ComponentContainer component rendering", () => {
   test("should render the EmptyContainer with title", () => {
     defaultProps.title = "a title";
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.arrayLength = 10;
     defaultProps.theme = "default";
@@ -159,9 +143,7 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.objKey = "component";
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
     expect(screen.getAllByTestId("field-multiple-options")).toBeTruthy();
@@ -170,7 +152,6 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.text = "texto a mostrar";
     defaultProps.editorID = 1;
     defaultProps.whiteList = ["BasicContent", "CardCollection"];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.disabled = false;
     defaultProps.arrayLength = 10;
@@ -253,9 +234,7 @@ describe("ComponentContainer component rendering", () => {
     };
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
     expect(screen.getByTestId("icon-wrapper")).toBeTruthy();
@@ -267,7 +246,6 @@ describe("ComponentContainer component rendering", () => {
     defaultProps.moduleTitle = "module title";
     defaultProps.editorID = 1;
     defaultProps.whiteList = [];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.disabled = false;
     defaultProps.arrayLength = 10;
@@ -291,9 +269,7 @@ describe("ComponentContainer component rendering", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
     expect(screen.findByText("module title")).toBeTruthy();
@@ -302,7 +278,6 @@ describe("ComponentContainer component rendering", () => {
   test("should render the SideModal when click EmptyContainer", () => {
     defaultProps.title = "a title";
     defaultProps.whiteList = ["LinkImage", "Video"];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.arrayLength = 2;
     defaultProps.theme = "griddo-alt-theme";
@@ -325,9 +300,7 @@ describe("ComponentContainer component rendering", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
 
@@ -341,7 +314,6 @@ describe("ComponentContainer component rendering", () => {
   test("should render component options on SideModal", () => {
     defaultProps.title = "a title";
     defaultProps.whiteList = ["LinkImage", "Video"];
-    defaultProps.goTo = "/home";
     defaultProps.isArray = false;
     defaultProps.arrayLength = 2;
     defaultProps.theme = "griddo-alt-theme";
@@ -364,9 +336,7 @@ describe("ComponentContainer component rendering", () => {
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
-        <Draggable draggableId="1" index={1} key={1}>
-          {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-        </Draggable>
+        <ComponentContainer {...defaultProps} />
       </ThemeProvider>
     );
 
@@ -383,7 +353,6 @@ describe("ComponentContainer component rendering", () => {
 test("should render the FloatingMenu with options when click Component Container", async () => {
   defaultProps.title = "a title";
   defaultProps.whiteList = ["LinkImage", "Video"];
-  defaultProps.goTo = "/home";
   defaultProps.isArray = false;
   defaultProps.arrayLength = 2;
   defaultProps.theme = "griddo-alt-theme";
@@ -412,9 +381,7 @@ test("should render the FloatingMenu with options when click Component Container
 
   render(
     <ThemeProvider theme={parseTheme(globalTheme)}>
-      <Draggable draggableId="1" index={1} key={1}>
-        {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-      </Draggable>
+      <ComponentContainer {...defaultProps} />
     </ThemeProvider>
   );
 
@@ -432,7 +399,6 @@ test("should render the FloatingMenu with options when click Component Container
 test("should render the SideModal with options when click the replace action", async () => {
   defaultProps.title = "a title";
   defaultProps.whiteList = ["LinkImage", "Video"];
-  defaultProps.goTo = "/home";
   defaultProps.isArray = false;
   defaultProps.arrayLength = 2;
   defaultProps.theme = "griddo-alt-theme";
@@ -461,9 +427,7 @@ test("should render the SideModal with options when click the replace action", a
 
   render(
     <ThemeProvider theme={parseTheme(globalTheme)}>
-      <Draggable draggableId="1" index={1} key={1}>
-        {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-      </Draggable>
+      <ComponentContainer {...defaultProps} />
     </ThemeProvider>
   );
 
@@ -489,7 +453,6 @@ test("should render the SideModal with options when click the replace action", a
 test("should not render the drag handle if arrays length is lower than two", async () => {
   defaultProps.title = "a title";
   defaultProps.whiteList = ["LinkImage", "Video"];
-  defaultProps.goTo = "/home";
   defaultProps.isArray = false;
   defaultProps.arrayLength = 1;
   defaultProps.theme = "griddo-alt-theme";
@@ -518,9 +481,7 @@ test("should not render the drag handle if arrays length is lower than two", asy
 
   render(
     <ThemeProvider theme={parseTheme(globalTheme)}>
-      <Draggable draggableId="1" index={1} key={1}>
-        {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-      </Draggable>
+      <ComponentContainer {...defaultProps} />
     </ThemeProvider>
   );
 
@@ -531,7 +492,6 @@ test("should not render the drag handle if arrays length is lower than two", asy
 test("should render the drag handle if arrays length is greater than two", async () => {
   defaultProps.title = "a title";
   defaultProps.whiteList = ["LinkImage", "Video"];
-  defaultProps.goTo = "/home";
   defaultProps.isArray = true;
   defaultProps.arrayLength = 3;
   defaultProps.theme = "griddo-alt-theme";
@@ -560,9 +520,7 @@ test("should render the drag handle if arrays length is greater than two", async
 
   render(
     <ThemeProvider theme={parseTheme(globalTheme)}>
-      <Draggable draggableId="1" index={1} key={1}>
-        {(provided: DraggableProvided) => <ComponentContainer {...defaultProps} provided={provided} />}
-      </Draggable>
+      <ComponentContainer {...defaultProps} />
     </ThemeProvider>
   );
 

package/src/components/ActionMenu/index.tsx

@@ -6,13 +6,13 @@ import { IActionMenuOption } from "@ax/types";
 import * as S from "./style";
 
 const ActionMenu = (props: IActionMenuProps): JSX.Element => {
-  const { options, icon, className, tooltip } = props;
+  const { options, icon, className, tooltip, size } = props;
 
   const filteredOptions = options.filter((option: IActionMenuOption | undefined | null) => !!option);
 
   const MoreInfoButton = () => (
     <S.IconActionWrapper data-testid="more-info-button">
-      <IconAction icon={icon} />
+      <IconAction icon={icon} size={size} />
     </S.IconActionWrapper>
   );
 
@@ -56,6 +56,7 @@ export interface IActionMenuProps {
   icon: string;
   className?: string;
   tooltip?: string;
+  size?: "s" | "m";
 }
 
 export default ActionMenu;

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

@@ -13,8 +13,8 @@ const Label = styled.label<{ disabled: boolean | undefined; inversed: boolean; h
     p.disabled
       ? p.theme.color.interactiveDisabled
       : p.inversed
-      ? p.theme.color.textHighEmphasisInverse
-      : p.theme.color.textHighEmphasis};
+        ? p.theme.color.textHighEmphasisInverse
+        : p.theme.color.textHighEmphasis};
 `;
 
 const CheckMark = styled.span<{
@@ -32,21 +32,21 @@ const CheckMark = styled.span<{
     p.error
       ? p.theme.color.error
       : p.checked || p.indeterminate
-      ? p.theme.color.interactive01
-      : p.inversed
-      ? "transparent"
-      : p.theme.color.interactiveBackground};
+        ? p.theme.color.interactive01
+        : p.inversed
+          ? "transparent"
+          : p.theme.color.interactiveBackground};
   border: 2px solid
     ${(p) =>
       p.error
         ? p.theme.color.error
         : p.checked || p.indeterminate
-        ? p.theme.color.interactive01
-        : p.inversed
-        ? p.theme.color.interactiveInverse
-        : p.theme.color.interactiveInactive};
+          ? p.theme.color.interactive01
+          : p.inversed
+            ? p.theme.color.interactiveInverse
+            : p.theme.color.interactiveInactive};
   border-radius: 1.5px;
-  :after {
+  &:after {
     content: "";
     position: absolute;
     display: ${(p) => (p.checked || p.indeterminate ? `blocked` : `none`)};
@@ -66,15 +66,15 @@ const CheckMark = styled.span<{
       p.error
         ? p.theme.color.error
         : p.checked || p.indeterminate
-        ? p.theme.color.interactive01
-        : p.theme.color.textLowEmphasis};
+          ? p.theme.color.interactive01
+          : p.theme.color.textLowEmphasis};
     &:hover {
       border-color: ${(p) =>
         p.error
           ? p.theme.color.error
           : p.checked || p.indeterminate
-          ? p.theme.color.interactive01
-          : p.theme.color.interactiveInactive};
+            ? p.theme.color.interactive01
+            : p.theme.color.interactiveInactive};
     }
   }
 `;
@@ -85,7 +85,7 @@ const Input = styled.input`
   cursor: pointer;
   height: 0;
   width: 0;
-  :disabled ~ ${CheckMark} {
+  &:disabled ~ ${CheckMark} {
     background-color: ${(p) => (p.checked ? p.theme.color.interactiveDisabled : p.theme.color.interactiveBackground)};
     border: 2px solid ${(p) => p.theme.color.interactiveDisabled};
   }

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

@@ -1,5 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from "react-beautiful-dnd";
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 import { IModule, INotification, ISchemaField } from "@ax/types";
 import { ComponentContainer, SideModal, Toast } from "@ax/components";
@@ -82,6 +91,14 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedItems.all]);
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    })
+  );
+
   const getText = (name: string, index: number) => {
     return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
   };
@@ -119,23 +136,23 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
-  const ComponentList = React.memo(function ComponentList({ components }: any) {
-    return components.map((element: IModule, i: number) => {
-      const { editorID, fixed } = element;
-      const componentProps = getComponentProps(element, activatedModules, isModuleArr);
-      const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule, isModuleDisabled } =
-        componentProps;
-      const text = getText(componentTitle || displayName, i);
-      const isItemSelected = isSelected(editorID);
-      const isDraggingSelected = selectedItems.all.includes(draggingId);
-      const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
-      const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
-      const isActive = scrollEditorID === editorID;
-      const canDelete = !isFormArr || !fixed;
-
-      return (
-        <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
-          {(provided, snapshot) => (
+  const ComponentList = React.memo(function ComponentList({ components }: { components: IModule[] }): JSX.Element {
+    return (
+      <>
+        {components.map((element: IModule, i: number) => {
+          const { editorID, fixed } = element;
+          const componentProps = getComponentProps(element, activatedModules, isModuleArr);
+          const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule, isModuleDisabled } =
+            componentProps;
+          const text = getText(componentTitle || displayName, i);
+          const isItemSelected = isSelected(editorID);
+          const isDraggingSelected = selectedItems.all.includes(draggingId);
+          const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
+          const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
+          const isActive = scrollEditorID === editorID;
+          const canDelete = !isFormArr || !fixed;
+
+          return (
             <ComponentContainer
               actionReplace={toggleModal}
               canReplace={canReplace}
@@ -155,45 +172,44 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               parentKey={objKey}
               theme={theme}
               arrayLength={components.length}
-              innerRef={provided.innerRef}
-              provided={provided}
               isModule={isModule}
               isSelected={isItemSelected}
               onChange={addToBulkSelection}
               hasMenu={selectedItems.all.length > 0}
               toggleToast={toggleToast}
-              isMultiDragging={snapshot.isDragging && isMultiDragging}
+              isMultiDragging={isMultiDragging}
               draggingCount={selectedItems.all.length}
               isActive={selectedID === editorID}
-              className={`${isGhosting ? "ghosting" : ""} ${snapshot.isDragging && isMultiDragging ? "dragging" : ""} ${
-                isActive ? "active" : ""
-              }`}
+              className={`${isGhosting ? "ghosting" : ""} ${isMultiDragging ? "dragging" : ""} ${isActive ? "active" : ""}`}
             />
-          )}
-        </Draggable>
-      );
-    });
+          );
+        })}
+      </>
+    );
   });
 
-  const onDragEnd = (result: DropResult) => {
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setDraggingId(active.id as number);
+  };
+
+  const handleOnDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
     const { moveModuleAction } = actions || {};
 
-    if (!moveModuleAction || !result.destination || result.destination.index === result.source.index) {
-      setDraggingId(null);
-      return;
-    }
+    if (moveModuleAction && over && active.id !== over.id) {
+      const newIndex = fixedValue.map((e: IModule) => e.editorID).indexOf(over.id as number);
 
-    if (selectedItems.all.length > 0 && selectedItems.all.includes(parseInt(result.draggableId))) {
-      moveModuleAction(selectedItems.all, selectedContent, result.destination.index, objKey);
-    } else {
-      moveModuleAction([parseInt(result.draggableId)], selectedContent, result.destination.index, objKey);
+      if (selectedItems.all.length > 0 && selectedItems.all.includes(active.id)) {
+        moveModuleAction(selectedItems.all, selectedContent, newIndex, objKey);
+      } else {
+        moveModuleAction([active.id as number], selectedContent, newIndex, objKey);
+      }
     }
 
     setDraggingId(null);
   };
 
-  const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
-
   const handleCopy = () => {
     const modulesCopied = copyModuleAction && copyModuleAction(selectedItems.all);
     modulesCopied &&
@@ -288,16 +304,16 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
         </S.ActionsWrapper>
       </S.ItemRow>
       {fixedValue && (
-        <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
-          <Droppable droppableId="list">
-            {(provided) => (
-              <div ref={provided.innerRef} {...provided.droppableProps}>
-                <ComponentList components={fixedValue} />
-                {provided.placeholder}
-              </div>
-            )}
-          </Droppable>
-        </DragDropContext>
+        <DndContext
+          collisionDetection={closestCenter}
+          onDragEnd={handleOnDragEnd}
+          onDragStart={handleDragStart}
+          sensors={sensors}
+        >
+          <SortableContext items={componentIDs} strategy={verticalListSortingStrategy}>
+            <ComponentList components={fixedValue} />
+          </SortableContext>
+        </DndContext>
       )}
       {displayReplaceSideModal && isOpen && (
         <SideModal