Merge branch 'main' into feat/vs-code-preview-ext

Author: gabrielmfern

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Ask a question
-    url: https://github.com/resendlabs/react-email/discussions
+    url: https://github.com/resend/react-email/discussions
     about: Ask questions and discuss with other community members
   - name: Feature request
-    url: https://github.com/resendlabs/react-email/discussions/new?category=ideas
+    url: https://github.com/resend/react-email/discussions/new?category=ideas
     about: Feature requests should be opened as discussions

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright 2022 Bu Kinoshita and Zeno Rocha
+Copyright 2024 Plus Five Five, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -6,7 +6,7 @@
 <div align="center">
 <a href="https://react.email">Website</a> 
 <span> · </span>
-<a href="https://github.com/resendlabs/react-email">GitHub</a> 
+<a href="https://github.com/resend/react-email">GitHub</a> 
 <span> · </span>
 <a href="https://react.email/discord">Discord</a>
 </div>
@@ -27,27 +27,27 @@ Install one of the components from your command line.
 #### With yarn
 
 ```sh
-yarn add @react-email/button -E
+yarn add @react-email/components -E
 ```
 
 #### With npm
 
 ```sh
-npm install @react-email/button -E
+npm install @react-email/components -E
 ```
 
 #### With pnpm
 
 ```sh
-pnpm install @react-email/button -E
+pnpm install @react-email/components -E
 ```
 
 ## Getting started
 
 Add the component to your email template. Include styles where needed.
 
 ```jsx
-import { Button } from "@react-email/button";
+import { Button } from "@react-email/components";
 
 const Email = () => {
   return (
@@ -62,30 +62,30 @@ const Email = () => {
 
 A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.
 
-- [Html](https://github.com/resendlabs/react-email/tree/main/packages/html)
-- [Head](https://github.com/resendlabs/react-email/tree/main/packages/head)
-- [Heading](https://github.com/resendlabs/react-email/tree/main/packages/heading)
-- [Button](https://github.com/resendlabs/react-email/tree/main/packages/button)
-- [Link](https://github.com/resendlabs/react-email/tree/main/packages/link)
-- [Image](https://github.com/resendlabs/react-email/tree/main/packages/img)
-- [Divider](https://github.com/resendlabs/react-email/tree/main/packages/hr)
-- [Paragraph](https://github.com/resendlabs/react-email/tree/main/packages/text)
-- [Container](https://github.com/resendlabs/react-email/tree/main/packages/container)
-- [Preview](https://github.com/resendlabs/react-email/tree/main/packages/preview)
-- [Body](https://github.com/resendlabs/react-email/tree/main/packages/body)
-- [Column](https://github.com/resendlabs/react-email/tree/main/packages/column)
-- [Section](https://github.com/resendlabs/react-email/tree/main/packages/section)
-- [Font](https://github.com/resendlabs/react-email/tree/main/packages/font)
+- [Html](https://github.com/resend/react-email/tree/main/packages/html)
+- [Head](https://github.com/resend/react-email/tree/main/packages/head)
+- [Heading](https://github.com/resend/react-email/tree/main/packages/heading)
+- [Button](https://github.com/resend/react-email/tree/main/packages/button)
+- [Link](https://github.com/resend/react-email/tree/main/packages/link)
+- [Image](https://github.com/resend/react-email/tree/main/packages/img)
+- [Divider](https://github.com/resend/react-email/tree/main/packages/hr)
+- [Paragraph](https://github.com/resend/react-email/tree/main/packages/text)
+- [Container](https://github.com/resend/react-email/tree/main/packages/container)
+- [Preview](https://github.com/resend/react-email/tree/main/packages/preview)
+- [Body](https://github.com/resend/react-email/tree/main/packages/body)
+- [Column](https://github.com/resend/react-email/tree/main/packages/column)
+- [Section](https://github.com/resend/react-email/tree/main/packages/section)
+- [Font](https://github.com/resend/react-email/tree/main/packages/font)
 
 ## Integrations
 
 Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:
 
-- [Resend](https://github.com/resendlabs/react-email/tree/main/examples/resend)
-- [Nodemailer](https://github.com/resendlabs/react-email/tree/main/examples/nodemailer)
-- [SendGrid](https://github.com/resendlabs/react-email/tree/main/examples/sendgrid)
-- [Postmark](https://github.com/resendlabs/react-email/tree/main/examples/postmark)
-- [AWS SES](https://github.com/resendlabs/react-email/tree/main/examples/aws-ses)
+- [Resend](https://github.com/resend/react-email/tree/main/examples/resend)
+- [Nodemailer](https://github.com/resend/react-email/tree/main/examples/nodemailer)
+- [SendGrid](https://github.com/resend/react-email/tree/main/examples/sendgrid)
+- [Postmark](https://github.com/resend/react-email/tree/main/examples/postmark)
+- [AWS SES](https://github.com/resend/react-email/tree/main/examples/aws-ses)
 
 ## Support
 

demo/.gitignore renamed to apps/demo/.gitignore

@@ -0,0 +1,198 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+interface AirbnbReviewEmailProps {
+  authorName?: string;
+  authorImage?: string;
+  reviewText?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "";
+
+export const AirbnbReviewEmail = ({
+  authorName,
+  authorImage,
+  reviewText,
+}: AirbnbReviewEmailProps) => {
+  const previewText = `Read ${authorName}'s review`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+
+      <Body style={main}>
+        <Container style={container}>
+          <Section>
+            <Img
+              src={`${baseUrl}/static/airbnb-logo.png`}
+              width="96"
+              height="30"
+              alt="Airbnb"
+            />
+          </Section>
+          <Section>
+            <Img
+              src={authorImage}
+              width="96"
+              height="96"
+              alt={authorName}
+              style={userImage}
+            />
+          </Section>
+          <Section style={{ paddingBottom: "20px" }}>
+            <Row>
+              <Text style={heading}>Here's what {authorName} wrote</Text>
+              <Text style={review}>{reviewText}</Text>
+              <Text style={paragraph}>
+                Now that the review period is over, we’ve posted {authorName}
+                ’s review to your Airbnb profile.
+              </Text>
+              <Text style={{ ...paragraph, paddingBottom: "16px" }}>
+                While it’s too late to write a review of your own, you can send
+                your feedback to {authorName} using your Airbnb message thread.
+              </Text>
+
+              <Button style={button} href="https://airbnb.com/">
+                Send My Feedback
+              </Button>
+            </Row>
+          </Section>
+
+          <Hr style={hr} />
+
+          <Section>
+            <Row>
+              <Text style={{ ...paragraph, fontWeight: "700" }}>
+                Common questions
+              </Text>
+              <Text>
+                <Link href="https://airbnb.com/help/article/13" style={link}>
+                  How do reviews work?
+                </Link>
+              </Text>
+              <Text>
+                <Link href="https://airbnb.com/help/article/1257" style={link}>
+                  How do star ratings work?
+                </Link>
+              </Text>
+              <Text>
+                <Link href="https://airbnb.com/help/article/995" style={link}>
+                  Can I leave a review after 14 days?
+                </Link>
+              </Text>
+              <Hr style={hr} />
+              <Text style={footer}>
+                Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
+              </Text>
+              <Link href="https://airbnb.com" style={reportLink}>
+                Report unsafe behavior
+              </Link>
+            </Row>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+AirbnbReviewEmail.PreviewProps = {
+  authorName: "Alex",
+  authorImage: `${baseUrl}/static/airbnb-review-user.jpg`,
+  reviewText: `“Alan was a great guest! Easy communication, the apartment was left
+    in great condition, very polite, and respectful of all house rules.
+    He’s welcome back anytime and would easily recommend him to any
+    host!”`,
+} as AirbnbReviewEmailProps;
+
+export default AirbnbReviewEmail;
+
+const main = {
+  backgroundColor: "#ffffff",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+};
+
+const container = {
+  margin: "0 auto",
+  padding: "20px 0 48px",
+  width: "580px",
+  maxWidth: "100%",
+};
+
+const userImage = {
+  margin: "0 auto",
+  marginBottom: "16px",
+  borderRadius: "50%",
+};
+
+const heading = {
+  fontSize: "32px",
+  lineHeight: "1.3",
+  fontWeight: "700",
+  color: "#484848",
+};
+
+const paragraph = {
+  fontSize: "18px",
+  lineHeight: "1.4",
+  color: "#484848",
+};
+
+const review = {
+  ...paragraph,
+  padding: "24px",
+  backgroundColor: "#f2f3f3",
+  borderRadius: "4px",
+};
+
+const button = {
+  backgroundColor: "#ff5a5f",
+  borderRadius: "3px",
+  color: "#fff",
+  fontSize: "18px",
+  paddingTop: "19px",
+  paddingBottom: "19px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  display: "block",
+  width: "100%",
+};
+
+const link = {
+  ...paragraph,
+  color: "#ff5a5f",
+  display: "block",
+};
+
+const reportLink = {
+  fontSize: "14px",
+  color: "#9ca299",
+  textDecoration: "underline",
+};
+
+const hr = {
+  borderColor: "#cccccc",
+  margin: "20px 0",
+};
+
+const footer = {
+  color: "#9ca299",
+  fontSize: "14px",
+  marginBottom: "10px",
+};

apps/demo/emails/airbnb-review.tsx

@@ -27,7 +27,7 @@ const baseUrl = process.env.VERCEL_URL
 
 export const AmazonReviewEmail = ({
   titleText = "Your opinion is important!",
-  reviewText = "Zeno Rocha, do you have a moment? We would like to know if everything went well for you. Take a moment to review your most recent purchases.",
+  reviewText = "Alan Turing, do you have a moment? We would like to know if everything went well for you. Take a moment to review your most recent purchases.",
   reviwStars = Array(5).fill(`${baseUrl}/static/amazon-rating.gif`),
   socialMediaIcons = [
     `${baseUrl}/static/amazon-instagram.jpg`,
@@ -83,8 +83,13 @@ export const AmazonReviewEmail = ({
                 </Text>
                 <Text>Start with rating this product</Text>
 
-                {reviwStars.map((star) => (
-                  <Img src={star} alt="Amazon Rating" style={rating} />
+                {reviwStars.map((star, index) => (
+                  <Img
+                    key={index}
+                    src={star}
+                    alt="Amazon Rating"
+                    style={rating}
+                  />
                 ))}
 
                 <Text>
@@ -120,8 +125,9 @@ export const AmazonReviewEmail = ({
               </Column>
 
               <Column align="right">
-                {socialMediaIcons.map((src) => (
+                {socialMediaIcons.map((src, index) => (
                   <Img
+                    key={index}
                     src={src}
                     alt="Amazon Social Midia"
                     width="30"
@@ -143,7 +149,7 @@ export const AmazonReviewEmail = ({
                 We hope this message was helpful to you. However, if you prefer
                 not to receive this type of communication from{" "}
                 <Link style={urlLink}>Amazon.com</Link> at{" "}
-                <Link style={urlLink}>zenorocha@gmail.com </Link>,{" "}
+                <Link style={urlLink}>alanturing@gmail.com </Link>,{" "}
                 <Link style={clickHereLink}>click here</Link> .
               </Text>
               <Text style={footerText}>

demo/emails/amazon-review.tsx renamed to apps/demo/emails/amazon-review.tsx

@@ -65,7 +65,7 @@ export const AppleReceiptEmail = () => (
                         textDecoration: "underline",
                       }}
                     >
-                      zeno.rocha@gmail.com
+                      alan.turing@gmail.com
                     </Link>
                   </Column>
                 </Row>
@@ -102,7 +102,7 @@ export const AppleReceiptEmail = () => (
               <Text style={informationTableValue}>
                 Visa .... 7461 (Apple Pay)
               </Text>
-              <Text style={informationTableValue}>Zeno Rocha</Text>
+              <Text style={informationTableValue}>Alan Turing</Text>
               <Text style={informationTableValue}>2125 Chestnut St</Text>
               <Text style={informationTableValue}>San Francisco, CA 94123</Text>
               <Text style={informationTableValue}>USA</Text>
@@ -312,6 +312,7 @@ const container = {
   margin: "0 auto",
   padding: "20px 0 48px",
   width: "660px",
+  maxWidth: "100%",
 };
 
 const tableCell = { display: "table-cell" };