fix(demo): Preview component being used outside of Body (#1698)

gabrielmfern · web-flow · commit 6a4f129ae16d · 2025-02-13T10:53:18.000-03:00
diff --git a/apps/demo/emails/magic-links/aws-verify-email.tsx b/apps/demo/emails/magic-links/aws-verify-email.tsx
@@ -27,8 +27,8 @@ export default function AWSVerifyEmail({
   return (
     <Html>
       <Head />
-      <Preview>AWS Email Verification</Preview>
       <Body style={main}>
+        <Preview>AWS Email Verification</Preview>
         <Container style={container}>
           <Section style={coverSection}>
             <Section style={imageSection}>
diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx
@@ -27,8 +27,8 @@ export const LinearLoginCodeEmail = ({
 }: LinearLoginCodeEmailProps) => (
   <Html>
     <Head />
-    <Preview>Your login code for Linear</Preview>
     <Body style={main}>
+      <Preview>Your login code for Linear</Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/linear-logo.png`}
diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -24,8 +24,8 @@ export const NotionMagicLinkEmail = ({
 }: NotionMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Preview>Log in with this magic link</Preview>
     <Body style={main}>
+      <Preview>Log in with this magic link</Preview>
       <Container style={container}>
         <Heading style={h1}>Login</Heading>
         <Link
diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx
@@ -26,8 +26,8 @@ export const RaycastMagicLinkEmail = ({
 }: RaycastMagicLinkEmailProps) => (
   <Html>
     <Head />
-    <Preview>Log in with this magic link.</Preview>
     <Body style={main}>
+      <Preview>Log in with this magic link.</Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/raycast-logo.png`}
diff --git a/apps/demo/emails/magic-links/slack-confirm.tsx b/apps/demo/emails/magic-links/slack-confirm.tsx
@@ -27,8 +27,8 @@ export const SlackConfirmEmail = ({
 }: SlackConfirmEmailProps) => (
   <Html>
     <Head />
-    <Preview>Confirm your email address</Preview>
     <Body style={main}>
+      <Preview>Confirm your email address</Preview>
       <Container style={container}>
         <Section style={logoContainer}>
           <Img
diff --git a/apps/demo/emails/newsletters/codepen-challengers.tsx b/apps/demo/emails/newsletters/codepen-challengers.tsx
@@ -22,8 +22,8 @@ const baseUrl = process.env.VERCEL_URL
 export const CodepenChallengersEmail = () => (
   <Html>
     <Head />
-    <Preview>#CodePenChallenge: Cubes</Preview>
     <Body style={main}>
+      <Preview>#CodePenChallenge: Cubes</Preview>
       <Section style={header}>
         <Img
           style={imgHeader}
diff --git a/apps/demo/emails/newsletters/google-play-policy-update.tsx b/apps/demo/emails/newsletters/google-play-policy-update.tsx
@@ -21,8 +21,8 @@ const baseUrl = process.env.VERCEL_URL
 export const GooglePlayPolicyUpdateEmail = () => (
   <Html>
     <Head />
-    <Preview>Google Play developers</Preview>
     <Body style={main}>
+      <Preview>Google Play developers</Preview>
       <Container style={container}>
         <Section>
           <Row>
diff --git a/apps/demo/emails/newsletters/stack-overflow-tips.tsx b/apps/demo/emails/newsletters/stack-overflow-tips.tsx
@@ -48,8 +48,8 @@ export const StackOverflowTipsEmail = ({
 }: StackOverflowTipsEmailProps) => (
   <Html>
     <Head />
-    <Preview>Stack overflow tips for searching</Preview>
     <Body style={main}>
+      <Preview>Stack overflow tips for searching</Preview>
       <Container style={container}>
         <Section style={logo}>
           <Img width={146} src={`${baseUrl}/static/stack-overflow-logo.png`} />
diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx
@@ -25,10 +25,10 @@ export const GithubAccessTokenEmail = ({
 }: GithubAccessTokenEmailProps) => (
   <Html>
     <Head />
-    <Preview>
-      A fine-grained personal access token has been added to your account
-    </Preview>
     <Body style={main}>
+      <Preview>
+        A fine-grained personal access token has been added to your account
+      </Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/github.png`}
diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx
@@ -49,9 +49,9 @@ export const VercelInviteUserEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
       <Tailwind>
         <Body className="bg-white my-auto mx-auto font-sans px-2">
+          <Preview>{previewText}</Preview>
           <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
             <Section className="mt-[32px]">
               <Img
diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx
@@ -41,8 +41,8 @@ export const YelpRecentLoginEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Yelp recent login</Preview>
       <Body style={main}>
+        <Preview>Yelp recent login</Preview>
         <Container>
           <Section style={logo}>
             <Img src={`${baseUrl}/static/yelp-logo.png`} />
diff --git a/apps/demo/emails/receipts/apple-receipt.tsx b/apps/demo/emails/receipts/apple-receipt.tsx
@@ -21,9 +21,9 @@ const baseUrl = process.env.VERCEL_URL
 export const AppleReceiptEmail = () => (
   <Html>
     <Head />
-    <Preview>Apple Receipt</Preview>
 
     <Body style={main}>
+      <Preview>Apple Receipt</Preview>
       <Container style={container}>
         <Section>
           <Row>
diff --git a/apps/demo/emails/receipts/nike-receipt.tsx b/apps/demo/emails/receipts/nike-receipt.tsx
@@ -22,8 +22,10 @@ const baseUrl = process.env.VERCEL_URL
 export const NikeReceiptEmail = () => (
   <Html>
     <Head />
-    <Preview>Get your order summary, estimated delivery date and more</Preview>
     <Body style={main}>
+      <Preview>
+        Get your order summary, estimated delivery date and more
+      </Preview>
       <Container style={container}>
         <Section style={track.container}>
           <Row>
diff --git a/apps/demo/emails/reset-password/dropbox-reset-password.tsx b/apps/demo/emails/reset-password/dropbox-reset-password.tsx
@@ -28,8 +28,8 @@ export const DropboxResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Dropbox reset your password</Preview>
       <Body style={main}>
+        <Preview>Dropbox reset your password</Preview>
         <Container style={container}>
           <Img
             src={`${baseUrl}/static/dropbox-logo.png`}
diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx
@@ -34,8 +34,8 @@ export const TwitchResetPasswordEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>You updated the password for your Twitch account</Preview>
       <Body style={main}>
+        <Preview>You updated the password for your Twitch account</Preview>
         <Container style={container}>
           <Section style={logo}>
             <Img width={114} src={`${baseUrl}/static/twitch-logo.png`} />
diff --git a/apps/demo/emails/reviews/airbnb-review.tsx b/apps/demo/emails/reviews/airbnb-review.tsx
@@ -34,9 +34,9 @@ export const AirbnbReviewEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>{previewText}</Preview>
 
       <Body style={main}>
+        <Preview>{previewText}</Preview>
         <Container style={container}>
           <Section>
             <Img
diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx
@@ -38,9 +38,9 @@ export const AmazonReviewEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Amazon Review</Preview>
 
       <Body style={main}>
+        <Preview>Amazon Review</Preview>
         <Container style={container}>
           <Section>
             <Row>
diff --git a/apps/demo/emails/welcome/koala-welcome.tsx b/apps/demo/emails/welcome/koala-welcome.tsx
@@ -25,10 +25,10 @@ export const KoalaWelcomeEmail = ({
 }: KoalaWelcomeEmailProps) => (
   <Html>
     <Head />
-    <Preview>
-      The sales intelligence platform that helps you uncover qualified leads.
-    </Preview>
     <Body style={main}>
+      <Preview>
+        The sales intelligence platform that helps you uncover qualified leads.
+      </Preview>
       <Container style={container}>
         <Img
           src={`${baseUrl}/static/koala-logo.png`}
diff --git a/apps/demo/emails/welcome/netlify-welcome.tsx b/apps/demo/emails/welcome/netlify-welcome.tsx
@@ -81,7 +81,6 @@ export const NetlifyWelcomeEmail = ({
   return (
     <Html>
       <Head />
-      <Preview>Netlify Welcome</Preview>
       <Tailwind
         config={{
           theme: {
@@ -99,6 +98,7 @@ export const NetlifyWelcomeEmail = ({
           },
         }}
       >
+        <Preview>Netlify Welcome</Preview>
         <Body className="bg-offwhite text-base font-sans">
           <Img
             src={`${baseUrl}/static/netlify-logo.png`}
diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx
@@ -20,8 +20,8 @@ const baseUrl = process.env.VERCEL_URL
 export const StripeWelcomeEmail = () => (
   <Html>
     <Head />
-    <Preview>You're now ready to make live transactions with Stripe!</Preview>
     <Body style={main}>
+      <Preview>You're now ready to make live transactions with Stripe!</Preview>
       <Container style={container}>
         <Section style={box}>
           <Img
diff --git a/packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap b/packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap
@@ -10,15 +10,17 @@ exports[`email export 1`] = `
     <meta name="x-apple-disable-message-reformatting" />
     <!--$-->
   </head>
-  <div
-    style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
-    Join undefined on Vercel
-    <div>
-       ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿
-    </div>
-  </div>
   <body
     style='background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";padding-left:0.5rem;padding-right:0.5rem'>
+  >
+    <div
+      style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
+    >
+      Join undefined on Vercel
+      <div>
+         ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿
+      </div>
+    </div>
     <table
       align="center"
       width="100%"
diff --git a/packages/react-email/src/utils/__snapshots__/get-email-component.spec.ts.snap b/packages/react-email/src/utils/__snapshots__/get-email-component.spec.ts.snap
