feat: add iframes and viewport previewing

[chrisvxd]

👉 Demo 👈

Description

This PR:

• adds a fully drag-and-drop compatible iframe to Puck.Preview, enabling style isolation and media queries
• adds viewport switching for default small, medium and large
• adds zooming to the viewport switching
• introduces a new API, viewports, for customising the default viewports
• exposes viewport control via the UI state and dispatcher (with exception of zoom)

To support this, we needed to implement two additional libraries:

1. measured/dnd: A fork of hello-pangea/dnd (an actively maintained fork of react-beautiful-dnd) that supports both iframes and CSS transforms.
2. measured/auto-frame-component: A new library to sync styles from the host to the iframe

dnd.iframes.mp4

Testing

Play around with the viewports, ensuring drag-and-drop still works as expected.

• Demo
• Docs

Notes

• Whilst viewports and drag-and-drop work on mobile, managing a large viewport (such as desktop) can cause iOS Safari to crash due to high GPU usage.
• We could consider removing animations, or introducing an API to disable animations.
• We should disable transition when prefers-reduced-motion is set.

Future tasks

• Add API for iframe style isolation
• Add API and UI for adding a select menu of viewports (rather than just icon buttons)

[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	Mar 22, 2024 3:43pm
puck-docs	✅ Ready (Inspect)	Visit Preview		Mar 22, 2024 3:43pm

[monospaced]

Let's goooooo