Add APIs to restrict components passed to a DropZone

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

@@ -71,7 +71,10 @@ export const Columns: ComponentConfig<ColumnsProps> = {
                     : "",
               }}
             >
-              <DropZone zone={`column-${idx}`} />
+              <DropZone
+                zone={`column-${idx}`}
+                disallow={["Hero", "Logos", "Stats"]}
+              />
             </div>
           ))}
         </div>

apps/demo/config/index.tsx

@@ -26,7 +26,11 @@ type Props = {
 };
 
 // We avoid the name config as next gets confused
-export const conf: Config<Props, RootProps> = {
+export const conf: Config<
+  Props,
+  RootProps,
+  "layout" | "typography" | "interactive"
+> = {
   root: {
     render: Root,
   },

apps/docs/pages/docs/api-reference/components/drop-zone.mdx

@@ -26,9 +26,11 @@ const config = {
 
 ## Props
 
-| Param           | Example           | Type   | Status   |
-| --------------- | ----------------- | ------ | -------- |
-| [`zone`](#zone) | `zone: "my-zone"` | String | Required |
+| Param                   | Example                      | Type   | Status   |
+| ----------------------- | ---------------------------- | ------ | -------- |
+| [`zone`](#zone)         | `zone: "my-zone"`            | String | Required |
+| [`allow`](#allow)       | `allow: ["HeadingBlock"]`    | Array  |          |
+| [`disallow`](#disallow) | `disallow: ["HeadingBlock"]` | Array  |          |
 
 ## Required props
 
@@ -54,6 +56,48 @@ const config = {
 };
 ```
 
+## Optional props
+
+### `allow`
+
+Only allow specific components to be dragged into the DropZone:
+
+```tsx copy {7}
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" allow={["HeadingBlock"]} />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+### `disallow`
+
+Allow all but specific components to be dragged into the DropZone. Any items in `allow` will override `disallow`.
+
+```tsx copy {7}
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" disallow={["HeadingBlock"]} />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
 ## Restrictions
 
 You can't drag between DropZones that don't share a parent component.

apps/docs/pages/docs/integrating-puck/categories.mdx

@@ -70,6 +70,22 @@ const config = {
 };
 ```
 
+## TypeScript
+
+You can pass in available category names to the `Config` type if using TypeScript
+
+```tsx copy {3}
+import type { Config } from "@measured/puck";
+
+const config: Config<{}, {}, "typography" | "interactive"> = {
+  categories: {
+    typography: {},
+    interactive: {},
+  },
+  // ...
+};
+```
+
 ## Further reading
 
 - [`categories` API reference](/docs/api-reference/configuration/config#categories)

apps/docs/pages/docs/integrating-puck/multi-column-layouts.mdx

@@ -95,6 +95,53 @@ const config = {
 };
 ```
 
+### Restricting components
+
+The [`allow`](/docs/api-reference/components/drop-zone#allow) and [`disallow`](/docs/api-reference/components/drop-zone#disallow) props allow us to restrict which components can be dragged into a DropZone.
+
+```tsx {9} showLineNumbers copy
+import { DropZone } from "@measured/puck";
+
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" allow={["HeadingBlock"]} />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+This can be combined with [categories](/docs/integrating-puck/categories) to restrict based on your existing groups:
+
+```tsx {4-8,14} showLineNumbers copy
+import { DropZone } from "@measured/puck";
+
+const config = {
+  config: {
+    typography: {
+      components: ["HeadingBlock"],
+    },
+  },
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" allow={config.typography.components} />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
 ## Further reading
 
 - [The `<DropZone>` API](/docs/api-reference/components/drop-zone)

packages/core/components/DropZone/index.tsx

@@ -16,10 +16,12 @@ export { DropZoneProvider, dropZoneContext } from "./context";
 
 type DropZoneProps = {
   zone: string;
+  allow?: string[];
+  disallow?: string[];
   style?: CSSProperties;
 };
 
-function DropZoneEdit({ zone, style }: DropZoneProps) {
+function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
   const appContext = useAppContext();
   const ctx = useContext(dropZoneContext);
 
@@ -133,6 +135,27 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
     }
   }
 
+  if (isEnabled && userIsDragging && (allow || disallow)) {
+    const [_, componentType] = draggedItem.draggableId.split("::");
+
+    if (disallow) {
+      const defaultedAllow = allow || [];
+
+      // remove any explicitly allowed items from disallow
+      const filteredDisallow = (disallow || []).filter(
+        (item) => defaultedAllow.indexOf(item) === -1
+      );
+
+      if (filteredDisallow.indexOf(componentType) !== -1) {
+        isEnabled = false;
+      }
+    } else if (allow) {
+      if (allow.indexOf(componentType) === -1) {
+        isEnabled = false;
+      }
+    }
+  }
+
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const isAreaSelected = selectedItem && zoneArea === selectedItem.props.id;
 

packages/core/components/Puck/index.tsx

@@ -98,7 +98,7 @@ export function Puck({
   headerTitle,
   headerPath,
 }: {
-  config: Config;
+  config: Config<any, any, any>;
   data: Data;
   onChange?: (data: Data) => void;
   onPublish: (data: Data) => void;
@@ -354,11 +354,11 @@ export function Puck({
               droppedItem.source.droppableId.startsWith("component-list") &&
               droppedItem.destination
             ) {
-              const [_, componentId] = droppedItem.draggableId.split("::");
+              const [_, componentType] = droppedItem.draggableId.split("::");
 
               dispatch({
                 type: "insert",
-                componentType: componentId || droppedItem.draggableId,
+                componentType: componentType || droppedItem.draggableId,
                 destinationIndex: droppedItem.destination!.index,
                 destinationZone: droppedItem.destination.droppableId,
               });

packages/core/components/Render/index.tsx

@@ -4,7 +4,13 @@ import { rootDroppableId } from "../../lib/root-droppable-id";
 import { Config, Data } from "../../types/Config";
 import { DropZone, DropZoneProvider } from "../DropZone";
 
-export function Render({ config, data }: { config: Config; data: Data }) {
+export function Render({
+  config,
+  data,
+}: {
+  config: Config<any, any, any>;
+  data: Data;
+}) {
   // DEPRECATED
   const rootProps = data.root.props || data.root;
 

packages/core/lib/resolve-all-data.ts

@@ -4,7 +4,7 @@ import { resolveRootData } from "./resolve-root-data";
 
 export const resolveAllData = async (
   data: Data,
-  config: Config,
+  config: Config<any, any, any>,
   onResolveStart?: (item: MappedItem) => void,
   onResolveEnd?: (item: MappedItem) => void
 ) => {