Implement new drag-and-drop engine

apps/demo/app/[...puckPath]/client.tsx

@@ -20,6 +20,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
           onPublish={async (data: Data) => {
             localStorage.setItem(key, JSON.stringify(data));
           }}
+          iframe={{ enabled: false }}
           plugins={[headingAnalyzer]}
           headerPath={path}
           overrides={{

apps/demo/config/blocks/Blank/index.tsx

@@ -8,9 +8,17 @@ const getClassName = getClassNameFactory("Hero", styles);
 export type HeroProps = {};
 
 export const Hero: ComponentConfig<HeroProps> = {
-  fields: {},
+  fields: {
+    myDropZone: {
+      type: "dropzone",
+    },
+  },
   defaultProps: {},
-  render: () => {
-    return <div className={getClassName()}></div>;
+  render: ({ myDropZone }) => {
+    return (
+      <div className={getClassName()}>
+        <DropZone style={{ display: "flex" }} zone="my-zone" />
+      </div>
+    );
   },
 };

apps/demo/config/blocks/Card/index.tsx

@@ -51,9 +51,10 @@ export const Card: ComponentConfig<CardProps> = {
     icon: "Feather",
     mode: "flat",
   },
-  render: ({ title, icon, description, mode }) => {
+  inline: true,
+  render: ({ title, icon, description, mode, puck }) => {
     return (
-      <div className={getClassName({ [mode]: mode })}>
+      <div className={getClassName({ [mode]: mode })} ref={puck.dragRef}>
         <div className={getClassName("icon")}>{icons[icon]}</div>
         <div className={getClassName("title")}>{title}</div>
         <div className={getClassName("description")}>{description}</div>

apps/demo/config/blocks/Card/styles.module.css

@@ -1,21 +1,19 @@
 .Card {
   display: flex;
+  grid-row: 1;
   flex-direction: column;
   align-items: center;
-  margin-left: auto;
-  margin-right: auto;
   gap: 16px;
-  width: 100%;
+  /* width: 100%; */
 }
 
 .Card--card {
   background: white;
   box-shadow: rgba(140, 152, 164, 0.25) 0px 3px 6px 0px;
+  box-sizing: border-box;
   border-radius: 8px;
   flex: 1;
   max-width: 100%;
-  margin-left: unset;
-  margin-right: unset;
   padding: 24px;
   align-items: flex-start;
   width: auto;

apps/demo/config/blocks/Flex/index.tsx

@@ -8,47 +8,48 @@ import { Section } from "../../components/Section";
 const getClassName = getClassNameFactory("Flex", styles);
 
 export type FlexProps = {
-  items: { minItemWidth?: number }[];
-  minItemWidth: number;
+  direction: "row" | "column";
+  gap: number;
+  wrap: "wrap" | "nowrap";
 };
 
 export const Flex: ComponentConfig<FlexProps> = {
   fields: {
-    items: {
-      type: "array",
-      arrayFields: {
-        minItemWidth: {
-          label: "Minimum Item Width",
-          type: "number",
-          min: 0,
-        },
-      },
-      getItemSummary: (_, id) => `Item ${id + 1}`,
+    direction: {
+      label: "Direction",
+      type: "radio",
+      options: [
+        { label: "row", value: "row" },
+        { label: "column", value: "column" },
+      ],
     },
-    minItemWidth: {
-      label: "Minimum Item Width",
+    gap: {
+      label: "Gap",
       type: "number",
       min: 0,
     },
+    wrap: {
+      label: "Wrap",
+      type: "radio",
+      options: [
+        { label: "true", value: "wrap" },
+        { label: "false", value: "nowrap" },
+      ],
+    },
   },
   defaultProps: {
-    items: [{}, {}],
-    minItemWidth: 356,
+    direction: "row",
+    gap: 24,
+    wrap: "wrap",
   },
-  render: ({ items, minItemWidth }) => {
+  render: ({ direction, gap, wrap }) => {
     return (
       <Section>
-        <div className={getClassName()}>
-          {items.map((item, idx) => (
-            <div
-              key={idx}
-              className={getClassName("item")}
-              style={{ minWidth: item.minItemWidth || minItemWidth }}
-            >
-              <DropZone zone={`item-${idx}`} />
-            </div>
-          ))}
-        </div>
+        <DropZone
+          className={getClassName()}
+          style={{ flexDirection: direction, gap, flexWrap: wrap }}
+          zone="flex"
+        />
       </Section>
     );
   },

apps/demo/config/blocks/Flex/styles.module.css

@@ -1,8 +1,5 @@
 .Flex {
   display: flex;
-  gap: 24px;
-  min-height: 0;
-  min-width: 0;
   flex-wrap: wrap;
 }
 

apps/demo/config/index.tsx

@@ -2,6 +2,8 @@ import { Config, Data } from "@/core";
 import { ButtonGroup, ButtonGroupProps } from "./blocks/ButtonGroup";
 import { Card, CardProps } from "./blocks/Card";
 import { Columns, ColumnsProps } from "./blocks/Columns";
+import { Grid, GridProps } from "./blocks/Grid";
+import { GridItem, GridItemProps } from "./blocks/GridItem";
 import { Hero, HeroProps } from "./blocks/Hero";
 import { Heading, HeadingProps } from "./blocks/Heading";
 import { Flex, FlexProps } from "./blocks/Flex";
@@ -18,6 +20,8 @@ export type Props = {
   ButtonGroup: ButtonGroupProps;
   Card: CardProps;
   Columns: ColumnsProps;
+  Grid: GridProps;
+  GridItem: GridItemProps;
   Hero: HeroProps;
   Heading: HeadingProps;
   Flex: FlexProps;
@@ -43,7 +47,7 @@ export const conf: UserConfig = {
   },
   categories: {
     layout: {
-      components: ["Columns", "Flex", "VerticalSpace"],
+      components: ["Columns", "Grid", "GridItem", "Flex", "VerticalSpace"],
     },
     typography: {
       components: ["Heading", "Text"],
@@ -57,6 +61,8 @@ export const conf: UserConfig = {
     ButtonGroup,
     Card,
     Columns,
+    Grid,
+    GridItem,
     Hero,
     Heading,
     Flex,
@@ -68,6 +74,121 @@ export const conf: UserConfig = {
 };
 
 export const initialData: Record<string, Data> = {
+  "/grid": {
+    root: { props: { title: "Puck Example" } },
+    content: [
+      {
+        type: "Grid",
+        props: {
+          distribution: "auto",
+          id: "Grid-1",
+        },
+      },
+      // {
+      //   type: "Grid",
+      //   props: {
+      //     distribution: "auto",
+      //     id: "Grid-2",
+      //   },
+      // },
+    ],
+    zones: {
+      "Grid-2:grid": [
+        {
+          type: "Card",
+          props: {
+            title: "Built for content teams",
+            description:
+              "Puck enables content teams to make changes to their content without a developer or breaking the UI.",
+            icon: "pen-tool",
+            mode: "flat",
+            id: "Card-0d9077e00e0ad66c34c62ab6986967e1ce04f9e41",
+          },
+        },
+        {
+          type: "Card",
+          props: {
+            title: "Easy to integrate",
+            description:
+              "Front-end developers can easily integrate their own components using a familiar React API.",
+            icon: "git-merge",
+            mode: "flat",
+            id: "Card-978bef5d136d4b0d9855f5272429986ceb22e5a61",
+          },
+        },
+        {
+          type: "Card",
+          props: {
+            title: "No vendor lock-in",
+            description:
+              "Completely open-source, Puck is designed to be integrated into your existing React application.",
+            icon: "github",
+            mode: "flat",
+            id: "Card-133a61826f0019841aec6f0aec011bf07e6bc6de1",
+          },
+        },
+      ],
+      "Grid-1:grid": [
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-1",
+          },
+        },
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-2",
+          },
+        },
+        {
+          type: "GridItem",
+          props: {
+            id: "GridItem-3",
+          },
+        },
+      ],
+      "GridItem-1:items": [
+        {
+          type: "Card",
+          props: {
+            title: "Built for content teams",
+            description:
+              "Puck enables content teams to make changes to their content without a developer or breaking the UI.",
+            icon: "pen-tool",
+            mode: "flat",
+            id: "Card-0d9077e00e0ad66c34c62ab6986967e1ce04f9e4",
+          },
+        },
+      ],
+      "GridItem-2:items": [
+        {
+          type: "Card",
+          props: {
+            title: "Easy to integrate",
+            description:
+              "Front-end developers can easily integrate their own components using a familiar React API.",
+            icon: "git-merge",
+            mode: "flat",
+            id: "Card-978bef5d136d4b0d9855f5272429986ceb22e5a6",
+          },
+        },
+      ],
+      "GridItem-3:items": [
+        {
+          type: "Card",
+          props: {
+            title: "No vendor lock-in",
+            description:
+              "Completely open-source, Puck is designed to be integrated into your existing React application.",
+            icon: "github",
+            mode: "flat",
+            id: "Card-133a61826f0019841aec6f0aec011bf07e6bc6de",
+          },
+        },
+      ],
+    },
+  },
   "/": {
     content: [
       {

apps/demo/config/root.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import { DefaultRootProps } from "@/core";
+import { DefaultRootProps, DropZone } from "@/core";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
 
@@ -13,7 +13,7 @@ function Root({ children, puck }: RootProps) {
   return (
     <>
       <Header editMode={puck.isEditing} />
-      {children}
+      <DropZone zone={"default-zone"} disallow={["GridItem"]} />
       <Footer>
         <Footer.List title="Section">
           <Footer.Link href="">Label</Footer.Link>

packages/core/components/AutoField/fields/ArrayField/index.tsx

@@ -4,13 +4,13 @@ import { List, Plus, Trash } from "lucide-react";
 import { AutoFieldPrivate, FieldPropsInternal } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
-import { Droppable } from "../../../Droppable";
-import { Draggable } from "../../../Draggable";
+import { Droppable } from "../../../LegacyDnd/Droppable";
+import { Draggable } from "../../../LegacyDnd/Draggable";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types/Config";
 import { useAppContext } from "../../../Puck/context";
-import { DragDropContext } from "../../../DragDropContext";
+import { DragDropContext } from "../../../LegacyDnd/DragDropContext";
 
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);

packages/core/components/ComponentList/index.tsx

@@ -10,15 +10,14 @@ const getClassName = getClassNameFactory("ComponentList", styles);
 const ComponentListItem = ({
   name,
   label,
-  index,
 }: {
   name: string;
   label?: string;
-  index: number;
+  index?: number; // TODO deprecate
 }) => {
   const { overrides } = useAppContext();
   return (
-    <Drawer.Item label={label} name={name} index={index}>
+    <Drawer.Item label={label} name={name}>
       {overrides.componentItem}
     </Drawer.Item>
   );
@@ -68,15 +67,14 @@ const ComponentList = ({
       <div className={getClassName("content")}>
         <Drawer droppableId={title}>
           {children ||
-            Object.keys(config.components).map((componentKey, i) => {
+            Object.keys(config.components).map((componentKey) => {
               return (
                 <ComponentListItem
                   key={componentKey}
                   label={
                     config.components[componentKey]["label"] ?? componentKey
                   }
                   name={componentKey}
-                  index={i}
                 />
               );
             })}