Add APIs to restrict components passed to a DropZone

[chrisvxd]

Introduces two new DropZone APIs:

• allow - only allow these components to be dropped in the DropZone
• disallow - allow all but these components to be dropped in the DropZone, unless it's specified by allow.

Example

import { DropZone } from "@measured/puck";
 
const config = {
  components: {
    Example: {
      render: () => {
        return (
          <div>
            <DropZone zone="my-content" allow={["HeadingBlock"]} />
          </div>
        );
      },
    },
  },
};

These APIs be combined with categories:

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>
        );
      },
    },
  },
};

Closes #103, closes #185

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
puck-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 24, 2023 11:06am
puck-docs	✅ Ready (Inspect)	Visit Preview		Nov 24, 2023 11:06am