feat: render Preview inside iframe, inject built Tailwind CSS instead of runtime.

[karrui]

TL;DR

Added a new build script for Tailwind CSS and introduced react-frame-component to the Studio application.

This was intended to allow for isolation of preview in regards to the rest of the application (able to set specific breakpoints, etc). 90% of the way there, but click events and scroll locks still trigger on root for some reason. Mitigated with an effect but might cause more inconvenience in the future. Should still be good enough.

TODO (In future PRs):

• add turbo dependency to run tw-build script before dev/build/etc.

What changed?

• Added a build script build:preview-tw in package.json to compile Tailwind CSS.
• Introduced a new CSS file preview-tw.css generated by Tailwind CSS.
• Added the react-frame-component package to dependencies.
• Created a PreviewIframe component utilizing react-frame-component.
• Integrated PreviewIframe into the page editor.
• Restructured MobileNavMenu components in the Navbar.

How to test?

1. Run npm install to install the new dependency react-frame-component.
2. Execute npm run build:preview-tw to compile the Tailwind CSS file.
3. Navigate to the page editor in the Studio application and confirm the preview is rendered inside an iframe with the correct styles.
4. Verify the mobile navigation menu functions correctly.

Why make this change?

To improve the styling and component structure of the Studio application, and to provide a better development experience with Tailwind CSS and iframe previews.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
isomer-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 6:33am

[linear]

ISOM-1291 Move preview into iframe

[karrui]

• feat: add back to top button when sidebar overflows #401
• feat: update ContentPageHeader and ContentLayout with new design #399
• feat: update Siderail component and dependencies #398
• feat: render Preview inside iframe, inject built Tailwind CSS instead of runtime. #385 👈
• feat: set fullscreen layout and remove autodocs for layout stories #384
• feat: update Navbar component to fit design #370
• feat: add typography and semantic tailwind tokens to isomer component package #359
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @karrui and the rest of your teammates on Graphite

[seaerchin]

lgtm, clarification regarding the iframe. i've also noticed (while testing on local) that clicking on the hamburger menu expands the entire nav bar out to the whole document (and obscures the view), which doesn't happen on uat

i don't think expanding the nav bar out is a blocker to merge, but i caveat that we should definitely fix this soon because it's functionally not what users expect, and leads to a less than ideal experience.

another point of difference, though, is that now our iframe uses the embedded document's width as the width to bound the inner element. this means that now, we display a hamburger menu (at least on my mac's screen) whereas previously we displayed the menu. i think functionally this is a win but it does mean that we also need to have a sliding drawer for users to actually see their site in the desktop view.

[seaerchin]

cc @sehyunidaaa any opinions on sliding drawer ui/ux?

[karrui]

Merge activity

• Jul 31, 2:00 AM EDT: @karrui started a stack merge that includes this pull request via Graphite.
• Jul 31, 2:08 AM EDT: Graphite couldn't merge this PR because it had conflicts with the trunk branch.