npm - react-email - Versions diffs - 1.4.2-canary.1 → 1.4.2-canary.2 - Mend

react-email 1.4.2-canary.1 → 1.4.2-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/.react-email/next-env.d.ts +0 -0
package/.react-email/package.json +0 -0
package/.react-email/postcss.config.js +0 -0
package/.react-email/src/components/button.tsx +0 -0
package/.react-email/src/components/code.tsx +0 -0
package/.react-email/src/components/heading.tsx +0 -0
package/.react-email/src/components/icon-base.tsx +0 -0
package/.react-email/src/components/icon-button.tsx +0 -0
package/.react-email/src/components/icon-check.tsx +0 -0
package/.react-email/src/components/icon-clipboard.tsx +0 -0
package/.react-email/src/components/icon-download.tsx +0 -0
package/.react-email/src/components/index.ts +0 -0
package/.react-email/src/components/layout.tsx +0 -0
package/.react-email/src/components/logo.tsx +0 -0
package/.react-email/src/components/send.tsx +0 -0
package/.react-email/src/components/sidebar.tsx +0 -0
package/.react-email/src/components/text.tsx +0 -0
package/.react-email/src/components/tooltip-content.tsx +0 -0
package/.react-email/src/components/tooltip.tsx +0 -0
package/.react-email/src/components/topbar.tsx +0 -0
package/.react-email/src/pages/_app.tsx +26 -0
package/.react-email/src/pages/_document.tsx +0 -0
package/.react-email/src/pages/index.tsx +0 -0
package/.react-email/src/styles/globals.css +0 -0
package/.react-email/src/utils/as.ts +0 -0
package/.react-email/src/utils/copy-text-to-clipboard.ts +0 -0
package/.react-email/src/utils/index.ts +0 -0
package/.react-email/src/utils/unreachable.ts +0 -0
package/.react-email/tailwind.config.js +0 -0
package/.react-email/tsconfig.json +0 -0
package/dist/commands/exportTemplates.js +20 -1
package/emails/airbnb-review.tsx +163 -0
package/emails/dropbox-reset-password.tsx +85 -0
package/emails/google-play-policy-update.tsx +229 -0
package/emails/koala-welcome.tsx +97 -0
package/emails/linear-login-code.tsx +124 -0
package/emails/notion-magic-link.tsx +133 -0
package/emails/plaid-verify-identity.tsx +133 -0
package/emails/raycast-magic-link.tsx +107 -0
package/emails/static/airbnb-logo.png +0 -0
package/emails/static/airbnb-review-user.jpg +0 -0
package/emails/static/chat.png +0 -0
package/emails/static/dropbox.png +0 -0
package/emails/static/google-play-academy.png +0 -0
package/emails/static/google-play-chat.png +0 -0
package/emails/static/google-play-footer.png +0 -0
package/emails/static/google-play-header.png +0 -0
package/emails/static/google-play-icon.png +0 -0
package/emails/static/google-play-logo.png +0 -0
package/emails/static/google-play-pl.png +0 -0
package/emails/static/google-play.png +0 -0
package/emails/static/linear-logo.png +0 -0
package/emails/static/notion-logo.png +0 -0
package/emails/static/plaid.png +0 -0
package/emails/static/raycast-bg.png +0 -0
package/emails/static/raycast-logo.png +0 -0
package/emails/static/stripe-logo.png +0 -0
package/emails/static/twitch-icon-facebook.png +0 -0
package/emails/static/twitch-icon-twitter.png +0 -0
package/emails/static/twitch-logo.png +0 -0
package/emails/static/vercel-arrow.png +0 -0
package/emails/static/vercel-logo.png +0 -0
package/emails/static/yelp-footer.png +0 -0
package/emails/static/yelp-header.png +0 -0
package/emails/static/yelp-logo.png +0 -0
package/emails/stripe-welcome.tsx +152 -0
package/emails/twitch-reset-password.tsx +138 -0
package/emails/vercel-invite-user.tsx +196 -0
package/emails/yelp-recent-login.tsx +158 -0
package/package.json +4 -3
package/source/commands/exportTemplates.ts +28 -1

package/emails/stripe-welcome.tsx ADDED Viewed

@@ -0,0 +1,152 @@
+import { Button } from '@react-email/button';
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Hr } from '@react-email/hr';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>You're now ready to make live transactions with Stripe!</Preview>
+      <Section style={main}>
+        <Container style={container}>
+          <Section style={box}>
+            <Img
+              src="/static/stripe-logo.png"
+              width="49"
+              height="21"
+              alt="Stripe"
+            />
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              Thanks for submitting your account information. You're now ready
+              to make live transactions with Stripe!
+            </Text>
+            <Text style={paragraph}>
+              You can view your payments and a variety of other information
+              about your account right from your dashboard.
+            </Text>
+            <Button
+              pX={10}
+              pY={10}
+              style={button}
+              href="https://dashboard.stripe.com/login"
+            >
+              View your Stripe Dashboard
+            </Button>
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              If you haven't finished your integration, you might find our{' '}
+              <Link style={anchor} href="https://stripe.com/docs">
+                docs
+              </Link>{' '}
+              handy.
+            </Text>
+            <Text style={paragraph}>
+              Once you're ready to start accepting payments, you'll just need to
+              use your live{' '}
+              <Link
+                style={anchor}
+                href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+              >
+                API keys
+              </Link>{' '}
+              instead of your test API keys. Your account can simultaneously be
+              used for both test and live requests, so you can continue testing
+              while accepting live payments. Check out our{' '}
+              <Link style={anchor} href="https://stripe.com/docs/dashboard">
+                tutorial about account basics
+              </Link>
+              .
+            </Text>
+            <Text style={paragraph}>
+              Finally, we've put together a{' '}
+              <Link
+                style={anchor}
+                href="https://stripe.com/docs/checklist/website"
+              >
+                quick checklist
+              </Link>{' '}
+              to ensure your website conforms to card network standards.
+            </Text>
+            <Text style={paragraph}>
+              We'll be here to help you with any step along the way. You can
+              find answers to most questions and get in touch with us on our{' '}
+              <Link style={anchor} href="https://support.stripe.com/">
+                support site
+              </Link>
+              .
+            </Text>
+            <Text style={paragraph}>— The Stripe team</Text>
+            <Hr style={hr} />
+            <Text style={footer}>
+              Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
+            </Text>
+          </Section>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+const main = {
+  backgroundColor: '#f6f9fc',
+};
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  marginBottom: '64px',
+};
+const box = {
+  padding: '0 48px',
+};
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+};
+const paragraph = {
+  color: '#525f7f',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const,
+};
+const anchor = {
+  color: '#556cd6',
+};
+const button = {
+  backgroundColor: '#656ee8',
+  borderRadius: '5px',
+  color: '#fff',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'block',
+  width: '100%',
+};
+const footer = {
+  color: '#8898aa',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+  fontSize: '12px',
+  lineHeight: '16px',
+};

package/emails/twitch-reset-password.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import { Link } from '@react-email/link';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Yelp recent login</Preview>
+      <Section style={main}>
+        <Container style={container}>
+          <Section style={logo}>
+            <Img width={114} src="/static/twitch-logo.png" />
+          </Section>
+          <div style={sectionsBorders}>
+            <Section style={sectionBorder} />
+            <Section style={sectionCenter} />
+            <Section style={sectionBorder} />
+          </div>
+          <Section style={content}>
+            <Text style={paragraph}>Hi zenorocha,</Text>
+            <Text style={paragraph}>
+              You updated the password for your Twitch account on June 23, 2022
+              4:06:00 pm UTC. If this was you, then no further action is
+              required.
+            </Text>
+            <Text style={paragraph}>
+              However if you did NOT perform this password change, please
+              <Link href="#" style={link}>
+                {' '}
+                reset your account password
+              </Link>{' '}
+              immediately.
+            </Text>
+            <Text style={paragraph}>
+              Remember to use a password that is both strong and unique to your
+              Twitch account. To learn more about how to create a strong and
+              unique password,
+              <Link href="#" style={link}>
+                {' '}
+                click here.
+              </Link>
+            </Text>
+            <Text style={paragraph}>
+              Still have questions? Please contact
+              <Link href="#" style={link}>
+                {' '}
+                Twitch Support
+              </Link>
+            </Text>
+            <Text style={paragraph}>
+              Thanks,
+              <br />
+              Twitch Support Team
+            </Text>
+          </Section>
+        </Container>
+        <Section style={footer}>
+          <div style={iconsSocial}>
+            <Img src="/static/twitch-icon-twitter.png" />
+            <Img src="/static/twitch-icon-facebook.png" />
+          </div>
+          <Text style={{ textAlign: 'center', color: '#706a7b' }}>
+            © 2022 Twitch, All Rights Reserved <br />
+            350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA
+          </Text>
+        </Section>
+      </Section>
+    </Html>
+  );
+}
+const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';
+const main = {
+  backgroundColor: '#efeef1',
+  fontFamily,
+};
+const paragraph = {
+  lineHeight: 1.5,
+  fontSize: 14,
+};
+const container = {
+  width: '580px',
+  margin: '30px auto',
+  backgroundColor: '#ffffff',
+};
+const footer = {
+  width: '580px',
+  margin: '0 auto',
+};
+const content = {
+  padding: '5px 50px 10px 60px',
+};
+const logo = {
+  display: 'flex',
+  justifyContent: 'center',
+  alingItems: 'center',
+  padding: 30,
+};
+const sectionsBorders = {
+  width: '100%',
+  display: 'flex',
+};
+const sectionBorder = {
+  borderBottom: '1px solid rgb(238,238,238)',
+  width: '249px',
+};
+const sectionCenter = {
+  borderBottom: '1px solid rgb(145,71,255)',
+  width: '102px',
+};
+const iconsSocial = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 15,
+};
+const link = {
+  textDecoration: 'underline',
+};

package/emails/vercel-invite-user.tsx ADDED Viewed

@@ -0,0 +1,196 @@
+import { Button } from '@react-email/button';
+import { Container } from '@react-email/container';
+import { Head } from '@react-email/head';
+import { Hr } from '@react-email/hr';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Link } from '@react-email/link';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Join bukinoshita on Vercel</Preview>
+      <Section style={main}>
+        <Container style={container}>
+          <Section style={{ marginTop: '32px' }}>
+            <Img
+              src="/static/vercel-logo.png"
+              width="40"
+              height="37"
+              alt="Vercel"
+              style={logo}
+            />
+          </Section>
+          <Text style={h1}>
+            Join <strong>My Project</strong> on <strong>Vercel</strong>
+          </Text>
+          <Text style={text}>Hello zenorocha,</Text>
+          <Text style={text}>
+            <strong>bukinoshita</strong> (
+            <Link href="mailto:bukinoshita@example.com" style={link}>
+              bukinoshita@example.com
+            </Link>
+            ) has invited you to the <strong>My Project</strong> team on{' '}
+            <strong>Vercel</strong>.
+          </Text>
+          <table
+            style={spacing}
+            border={0}
+            cellPadding="0"
+            cellSpacing="10"
+            align="center"
+          >
+            <tr>
+              <td style={center} align="left" valign="middle">
+                <Img
+                  style={avatar}
+                  src="https://vercel.com/api/www/avatar/?u=zenorocha&amp;s=240&amp;format=png"
+                  width="64"
+                  height="64"
+                />
+              </td>
+              <td style={center} align="left" valign="middle">
+                <Img
+                  src="/static/vercel-arrow.png"
+                  width="12"
+                  height="9"
+                  alt="invited you to"
+                />
+              </td>
+              <td style={center} align="left" valign="middle">
+                <Img
+                  style={avatar}
+                  src="https://vercel.com/api/www/avatar/?teamId=team_3e17ZatpKJ1imLQdTyrLeBoX&amp;s=240&amp;format=png"
+                  width="64"
+                  height="64"
+                />
+              </td>
+            </tr>
+          </table>
+          <Section style={{ textAlign: 'center' }}>
+            <Button
+              pX={20}
+              pY={12}
+              style={btn}
+              href="https://vercel.com/teams/invite/foo"
+            >
+              Join the team
+            </Button>
+          </Section>
+          <Text style={text}>
+            <br />
+            or copy and paste this URL into your browser:{' '}
+            <Link
+              href="https://vercel.com/teams/invite/foo"
+              target="_blank"
+              style={link}
+              rel="noreferrer"
+            >
+              https://vercel.com/teams/invite/foo
+            </Link>
+          </Text>
+          <Hr style={hr} />
+          <Text style={footer}>
+            This invitation was intended for{' '}
+            <span style={black}>zenorocha</span>.This invite was sent from{' '}
+            <span style={black}>204.13.186.218</span> located in{' '}
+            <span style={black}>São Paulo, Brazil</span>. If you were not
+            expecting this invitation, you can ignore this email. If you are
+            concerned about your account's safety, please reply to this email to
+            get in touch with us.
+          </Text>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+const main = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+};
+const container = {
+  border: '1px solid #eaeaea',
+  borderRadius: '5px',
+  margin: '40px auto',
+  padding: '20px',
+  width: '465px',
+};
+const logo = {
+  margin: '0 auto',
+};
+const h1 = {
+  color: '#000',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '24px',
+  fontWeight: 'normal',
+  textAlign: 'center' as const,
+  margin: '30px 0',
+  padding: '0',
+};
+const avatar = {
+  borderRadius: '100%',
+};
+const link = {
+  color: '#067df7',
+  textDecoration: 'none',
+};
+const text = {
+  color: '#000',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '14px',
+  lineHeight: '24px',
+};
+const black = {
+  color: 'black',
+};
+const center = {
+  verticalAlign: 'middle',
+};
+const btn = {
+  backgroundColor: '#000',
+  borderRadius: '5px',
+  color: '#fff',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '12px',
+  fontWeight: 500,
+  lineHeight: '50px',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+};
+const spacing = {
+  marginBottom: '26px',
+};
+const hr = {
+  border: 'none',
+  borderTop: '1px solid #eaeaea',
+  margin: '26px 0',
+  width: '100%',
+};
+const footer = {
+  color: '#666666',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '12px',
+  lineHeight: '24px',
+};

package/emails/yelp-recent-login.tsx ADDED Viewed

@@ -0,0 +1,158 @@
+import { Container } from '@react-email/container';
+import { Button } from '@react-email/button';
+import { Head } from '@react-email/head';
+import { Html } from '@react-email/html';
+import { Img } from '@react-email/img';
+import { Preview } from '@react-email/preview';
+import { Section } from '@react-email/section';
+import { Text } from '@react-email/text';
+import * as React from 'react';
+export default function Email() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Yelp recent login</Preview>
+      <Section style={main}>
+        <Container style={container}>
+          <Section style={logo}>
+            <Img src="/static/yelp-logo.png" />
+          </Section>
+          <Section style={content}>
+            <Img width={620} src="/static/yelp-header.png" />
+            <Section style={boxInfos}>
+              <Section>
+                <Text
+                  style={{
+                    ...paragraph,
+                    fontSize: 32,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                  }}
+                >
+                  Hi Zeno,
+                </Text>
+                <Text
+                  style={{
+                    ...paragraph,
+                    fontSize: 26,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                  }}
+                >
+                  We noticed a recent login to your Yelp account.
+                </Text>
+              </Section>
+              <Section>
+                <Text style={paragraph}>
+                  <b>Time: </b>Today, September 7, 2022, 10:58 am {'('}
+                  US/Pacific
+                  {')'}
+                </Text>
+                <Text style={{ ...paragraph, marginTop: -5 }}>
+                  <b>Device: </b>Chrome on Mac OS X
+                </Text>
+                <Text style={{ ...paragraph, marginTop: -5 }}>
+                  <b>Location: </b>Upland, California, United States
+                </Text>
+                <Text
+                  style={{
+                    ...paragraph,
+                    color: 'rgb(0,0,0, 0.5)',
+                    fontSize: 14,
+                    marginTop: -5,
+                  }}
+                >
+                  *Approximate geographic location based on IP address:
+                  47.149.53.167
+                </Text>
+              </Section>
+              <Text style={paragraph}>
+                If this was you, there's nothing else you need to do.
+              </Text>
+              <Text style={{ ...paragraph, marginTop: -5 }}>
+                If this wasn't you or if you have additional questions, please
+                see our support page.
+              </Text>
+              <Section style={containerButton}>
+                <Button style={button}>Learn More</Button>
+              </Section>
+            </Section>
+          </Section>
+          <Section style={containerImageFooter}>
+            <Img width={620} src="/static/yelp-footer.png" />
+          </Section>
+          <Text
+            style={{
+              ...paragraph,
+              textAlign: 'center',
+              fontSize: 12,
+              color: 'rgb(0,0,0, 0.7)',
+            }}
+          >
+            © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105,
+            U.S.A. | www.yelp.com
+          </Text>
+        </Container>
+      </Section>
+    </Html>
+  );
+}
+const fontFamily =
+  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+const main = {
+  backgroundColor: '#fff',
+};
+const paragraph = {
+  fontSize: 16,
+  fontFamily,
+};
+const container = {
+  width: '620px',
+  margin: '0 auto',
+};
+const logo = {
+  padding: '30px 20px',
+};
+const containerButton = {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+};
+const button = {
+  backgroundColor: '#e00707',
+  padding: '12px 30px',
+  borderRadius: 3,
+  color: '#FFF',
+  fontWeight: 'bold',
+  border: '1px solid rgb(0,0,0, 0.1)',
+  fontFamily,
+  cursor: 'pointer',
+};
+const content = {
+  border: '1px solid rgb(0,0,0, 0.1)',
+  borderRadius: '3px',
+  overflow: 'hidden',
+};
+const boxInfos = {
+  padding: '20px 40px',
+};
+const containerImageFooter = {
+  padding: '45px 0 0 0',
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.4.2-canary.1",
+  "version": "1.4.2-canary.2",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -39,7 +39,8 @@
     "log-symbols": "4.1.0",
     "ora": "5.4.1",
     "read-pkg": "5.2.0",
-    "shelljs": "0.8.5"
+    "shelljs": "0.8.5",
+    "tree-node-cli": "^1.6.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
@@ -47,4 +48,4 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1"
   }
-}
+}