feat: upgrade to react 18 - fix build #8 (#3832)

package.json

@@ -220,7 +220,12 @@
     "@types/eslint": "8.2.1",
     "yargs": "^17.3.1",
     "@lerna/version@3.22.1": "patch:@lerna/version@npm:3.22.1#.yarn/patches/@lerna-version-npm-3.22.1-97f4c3a7dd",
-    "@lerna/publish@3.22.1": "patch:@lerna/publish@npm:3.22.1#.yarn/patches/@lerna-publish-npm-3.22.1-469707df67"
+    "@lerna/publish@3.22.1": "patch:@lerna/publish@npm:3.22.1#.yarn/patches/@lerna-publish-npm-3.22.1-469707df67",
+    "react-dnd": "^16.0.0",
+    "react-dnd-html5-backend": "^16.0.0"
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@3.6.4",
+  "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.5"
+  }
 }

packages/app-form-builder/package.json

@@ -42,6 +42,7 @@
     "apollo-cache": "^1.3.5",
     "apollo-client": "^2.6.10",
     "apollo-utilities": "^1.3.4",
+    "dnd-core": "^16.0.1",
     "dot-prop-immutable": "^2.1.0",
     "emotion": "^10.0.17",
     "graphql": "^15.7.2",
@@ -51,8 +52,8 @@
     "lodash": "4.17.21",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^1.1.0",
     "react-hotkeyz": "^1.0.4",

packages/app-form-builder/src/admin/components/FormEditor/DragPreview.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useDragLayer } from "react-dnd";
-import { DragSourceMonitor } from "react-dnd/lib/interfaces/monitors";
+import { useDragLayer, DragSourceMonitor } from "react-dnd";
 
 let subscribedToOffsetChange = false;
 

packages/app-form-builder/src/admin/components/FormEditor/Draggable.tsx

@@ -1,8 +1,6 @@
 import React, { ReactElement } from "react";
-import { Container } from "~/types";
-import { useDrag, DragPreviewImage, ConnectDragSource } from "react-dnd";
-import { DragSourceMonitor } from "react-dnd/lib/interfaces/monitors";
-import { DragObjectWithType } from "react-dnd/lib/interfaces/hooksApi";
+import { Container, DragObjectWithType } from "~/types";
+import { useDrag, DragPreviewImage, ConnectDragSource, DragSourceMonitor } from "react-dnd";
 
 const emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
@@ -34,22 +32,19 @@ export interface DraggableProps extends BeginDragProps {
 }
 
 const Draggable = (props: DraggableProps) => {
-    const { children, beginDrag, endDrag, target } = props;
+    const { children, beginDrag, endDrag } = props;
 
     const [{ isDragging }, drag, preview] = useDrag({
-        item: {
-            type: "element",
-            target
-        },
-        collect: monitor => ({
-            isDragging: monitor.isDragging()
-        }),
-        begin(monitor) {
+        type: "element",
+        item(monitor) {
             if (typeof beginDrag !== "function") {
                 return beginDrag as undefined;
             }
             return beginDrag(props, monitor);
         },
+        collect: monitor => ({
+            isDragging: monitor.isDragging()
+        }),
         end(item, monitor) {
             if (typeof endDrag !== "function") {
                 return endDrag as undefined;

packages/app-form-builder/src/admin/components/FormEditor/Droppable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { ConnectDropTarget, DragObjectWithType, useDrop } from "react-dnd";
-import { FieldLayoutPositionType, Container, DropTargetType } from "~/types";
+import { ConnectDropTarget, useDrop } from "react-dnd";
+import { FieldLayoutPositionType, Container, DropTargetType, DragObjectWithType } from "~/types";
 
 export type DroppableChildrenFunction = (params: {
     isDragging: boolean;

packages/app-form-builder/src/admin/views/Editor.tsx

@@ -5,11 +5,6 @@ import { FormEditorApp } from "../components/FormEditor";
 
 const EditorView = () => {
     return (
-        /**
-         * react-dnd users old version of React which has children defined by default.
-         * This will break build when react-dnd is upgraded, so then we can remove ts-expect-error
-         */
-        // @ts-expect-error
         <DndProvider backend={HTML5Backend}>
             <FormEditorApp />
         </DndProvider>

packages/app-form-builder/src/types.ts

@@ -10,6 +10,11 @@ import {
 } from "@webiny/form/types";
 import { ApolloClient } from "apollo-client";
 import { SecurityPermission } from "@webiny/app-security/types";
+import type { SourceType } from "dnd-core";
+
+export type DragObjectWithType = {
+    type: SourceType;
+};
 
 export type DropTargetType = "field" | "row" | "conditionGroup" | "step";
 

packages/app-headless-cms-common/package.json

@@ -19,11 +19,11 @@
     "@webiny/app-security": "0.0.0",
     "@webiny/form": "0.0.0",
     "@webiny/plugins": "0.0.0",
+    "dnd-core": "^16.0.1",
     "graphql": "^15.7.2",
     "graphql-tag": "^2.12.6",
     "prop-types": "^15.7.2",
-    "react": "18.2.0",
-    "react-dnd": "^11.1.3"
+    "react": "18.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.9",

packages/app-headless-cms-common/src/types/index.ts

@@ -16,7 +16,11 @@ import {
 } from "./validation";
 import { CmsModel, CmsModelField } from "./model";
 import { CmsIdentity } from "~/types/shared";
-import { DragObjectWithType } from "react-dnd";
+import type { SourceType } from "dnd-core";
+
+export type DragObjectWithType = {
+    type: SourceType;
+};
 
 export * from "./validation";
 export * from "./model";

packages/app-headless-cms/package.json

@@ -55,6 +55,7 @@
     "apollo-link": "^1.2.14",
     "apollo-utilities": "^1.3.4",
     "classnames": "^2.2.6",
+    "dnd-core": "^16.0.1",
     "dot-prop-immutable": "^2.1.0",
     "emotion": "^10.0.17",
     "graphql": "^15.7.2",
@@ -66,8 +67,8 @@
     "react": "18.2.0",
     "react-butterfiles": "^1.3.3",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-hotkeyz": "^1.0.4",

packages/app-headless-cms/src/admin/components/DragPreview.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { useDragLayer } from "react-dnd";
-import { DragSourceMonitor } from "react-dnd/lib/interfaces/monitors";
-import { DragSourceMonitorImpl } from "react-dnd/lib/common/DragSourceMonitorImpl";
+import { useDragLayer, DragSourceMonitor } from "react-dnd";
+import { DragSourceMonitorImpl } from "~/types";
 
 let subscribedToOffsetChange = false;
 

packages/app-headless-cms/src/admin/components/Draggable.tsx

@@ -19,19 +19,19 @@ export interface DraggableProps {
 }
 
 const Draggable = (props: DraggableProps) => {
-    const { children, beginDrag, endDrag, target } = props;
+    const { children, beginDrag, endDrag } = props;
 
     const [{ isDragging }, drag, preview] = useDrag({
-        item: { type: "element", target },
-        collect: monitor => ({
-            isDragging: monitor.isDragging()
-        }),
-        begin(monitor) {
+        type: "element",
+        item(monitor) {
             if (typeof beginDrag === "function") {
                 return beginDrag(props, monitor);
             }
             return beginDrag;
         },
+        collect: monitor => ({
+            isDragging: monitor.isDragging()
+        }),
         end(item, monitor) {
             if (typeof endDrag === "function") {
                 return endDrag(item, monitor);

packages/app-headless-cms/src/admin/components/Droppable.tsx

@@ -15,7 +15,7 @@ export interface DroppableChildrenFunction {
 
 interface IsVisibleParams {
     type: "row" | "field" | "newField";
-    item: any;
+    item: DragSource;
     isDragging: boolean;
 }
 export interface IsVisibleCallable {
@@ -28,15 +28,20 @@ export interface DroppableProps {
     type?: string;
     children: DroppableChildrenFunction;
     isDragging?: boolean;
-    isDroppable?: (item: any) => boolean;
+    isDroppable?: (item: DragSource) => boolean;
     isVisible?: IsVisibleCallable;
     onDrop?: OnDropCallable;
 }
 
+export type DragObject = {
+    item: IsVisibleParams;
+    isOver: boolean;
+};
+
 const DroppableComponent = (props: DroppableProps) => {
     const { children, onDrop, isVisible = () => true } = props;
 
-    const [{ item, isOver }, drop] = useDrop({
+    const [{ item, isOver }, drop] = useDrop<DragSource, void, DragObject>({
         accept: "element",
         collect: monitor => ({
             isOver: monitor.isOver() && monitor.isOver({ shallow: true }),

packages/app-headless-cms/src/admin/components/FieldEditor/FieldEditorContext.tsx

@@ -16,6 +16,7 @@ import { FieldEditorProps } from "./FieldEditor";
 import { DragSourceMonitor } from "react-dnd";
 import { useModelFieldEditor } from "~/admin/components/FieldEditor/useModelFieldEditor";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { DragObject } from "../Droppable";
 
 interface DropTarget {
     row: number;
@@ -58,8 +59,8 @@ interface InsertFieldCallable {
 interface MoveFieldCallable {
     (params: MoveFieldParams): void;
 }
-interface OnEndDragCallable {
-    (item: DragSource, monitor: DragSourceMonitor): void;
+interface OnEndDragCallable<DragObject = unknown, DropResult = unknown> {
+    (item: DragSource, monitor: DragSourceMonitor<DragObject, DropResult>): void;
 }
 interface MoveRowCallable {
     (source: number, destination: number): void;
@@ -103,6 +104,10 @@ interface FieldEditorProviderProps extends FieldEditorProps {
     children: React.ReactElement;
 }
 
+type DropResult = {
+    dropTarget: string | null;
+};
+
 export const FieldEditorContext = React.createContext<FieldEditorContext | undefined>(undefined);
 /**
  * We try to generate the random id string but with the check that it does not exist already.
@@ -231,15 +236,18 @@ export const FieldEditorProvider = ({
         return null;
     }, []);
 
-    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {
+    const onEndDrag: OnEndDragCallable<DragObject, DropResult> = (
+        { type, field, fields },
+        monitor
+    ) => {
         if (!monitor.didDrop()) {
             return;
         }
 
         // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.
-        const { dropTarget } = monitor.getDropResult();
+        const monitorResult = monitor.getDropResult();
         const parentId = parent ? parent.fieldId : null;
-        if (dropTarget === parentId) {
+        if (monitorResult?.dropTarget === parentId) {
             return;
         }
 

packages/app-headless-cms/src/admin/views/contentModels/ContentModelEditor.tsx

@@ -20,11 +20,6 @@ const ContentModelEditorView = () => {
     return (
         <ContentModelEditorProvider key={modelId} apolloClient={apolloClient} modelId={modelId}>
             {
-                /**
-                 * react-dnd users old version of React which has children defined by default.
-                 * This will break build when react-dnd is upgraded, so then we can remove ts-expect-error
-                 */
-                // @ts-expect-error
                 <DndProvider backend={HTML5Backend}>
                     <Editor />
                 </DndProvider>

packages/app-headless-cms/src/types.ts

@@ -1,5 +1,7 @@
 import { CmsContentEntry } from "@webiny/app-headless-cms-common/types";
 import { FolderTableItem, RecordTableItem } from "@webiny/app-aco/table.types";
+import { DragSourceMonitor, XYCoord } from "react-dnd";
+import { DragDropManager, Identifier, Listener, Unsubscribe } from "dnd-core";
 
 export * from "@webiny/app-headless-cms-common/types";
 
@@ -9,3 +11,32 @@ export * from "@webiny/app-headless-cms-common/types";
 export type EntryTableItem = CmsContentEntry & RecordTableItem;
 
 export type TableItem = FolderTableItem | EntryTableItem;
+
+export declare class DragSourceMonitorImpl<DragObject = unknown, DropResult = unknown>
+    implements DragSourceMonitor<DragObject, DropResult>
+{
+    private internalMonitor;
+    private sourceId;
+    constructor(manager: DragDropManager);
+    receiveHandlerId(sourceId: Identifier | null): void;
+    getHandlerId(): Identifier | null;
+    subscribeToStateChange(
+        listener: Listener,
+        options?: {
+            handlerIds: Identifier[] | undefined;
+        }
+    ): Unsubscribe;
+    subscribeToOffsetChange(listener: Listener): Unsubscribe;
+    canDrag(): boolean;
+    isDragging(): boolean;
+    getItemType(): Identifier | null;
+    getItem<T = DragObject>(): T;
+    getDropResult<T = DropResult>(): T | null;
+    didDrop(): boolean;
+    getInitialClientOffset(): XYCoord | null;
+    getInitialSourceClientOffset(): XYCoord | null;
+    getClientOffset(): XYCoord | null;
+    getDifferenceFromInitialOffset(): XYCoord | null;
+    getSourceClientOffset(): XYCoord | null;
+    getTargetIds(): Identifier[];
+}

packages/app-page-builder-editor/package.json

@@ -30,8 +30,8 @@
     "nanoid": "^3.3.7",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "recoil": "^0.7.7"
   },

packages/app-page-builder-editor/src/components/Editor/Editor.tsx

@@ -69,11 +69,6 @@ export const Editor: React.FunctionComponent<EditorPropsType> = (/*{ revisions }
     };
 
     return (
-        /**
-         * react-dnd users old version of React which has children defined by default.
-         * This will break build when react-dnd is upgraded, so then we can remove ts-expect-error
-         */
-        // @ts-expect-error
         <DndProvider backend={HTML5Backend}>
             <div className={classSet(classes)}>
                 <pre>{JSON.stringify(editor.getPage(), null, 4)}</pre>

packages/app-page-builder/package.json

@@ -50,6 +50,7 @@
     "apollo-link": "^1.2.14",
     "apollo-utilities": "^1.3.4",
     "classnames": "^2.2.6",
+    "dnd-core": "^16.0.1",
     "dot-prop-immutable": "^2.1.0",
     "emotion": "^10.0.17",
     "graphql": "^15.7.2",
@@ -67,8 +68,8 @@
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-color": "^2.14.1",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-images": "^0.5.19",

packages/app-page-builder/src/editor/Editor.tsx

@@ -52,8 +52,6 @@ export const Editor = ({ stateInitializerFactory }: EditorProps) => {
     );
 
     return (
-        // 'children' prop missing from DndProvider types before react-dnd v14.0.5.
-        // @ts-expect-error
         <DndProvider backend={HTML5Backend}>
             <RecoilRoot initializeState={initializeState}>
                 <EditorProvider>