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

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

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 (72) hide show

package/dist/commands/dev.js +33 -13
package/package.json +2 -2
package/readme.md +44 -0
package/source/commands/dev.ts +50 -17
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 +0 -26
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/emails/airbnb-review.tsx +0 -163
package/emails/dropbox-reset-password.tsx +0 -85
package/emails/google-play-policy-update.tsx +0 -229
package/emails/koala-welcome.tsx +0 -97
package/emails/linear-login-code.tsx +0 -124
package/emails/notion-magic-link.tsx +0 -133
package/emails/plaid-verify-identity.tsx +0 -133
package/emails/raycast-magic-link.tsx +0 -107
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 +0 -152
package/emails/twitch-reset-password.tsx +0 -138
package/emails/vercel-invite-user.tsx +0 -196
package/emails/yelp-recent-login.tsx +0 -158

package/emails/google-play-policy-update.tsx DELETED Viewed

@@ -1,229 +0,0 @@
-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>Google Play developers</Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Section>
-            <Section style={headerBlue}>
-              <Img
-                src="/static/google-play-header.png"
-                width="305"
-                height="28"
-                alt="Google Play developers header blue transparent"
-              />
-            </Section>
-            <Section style={sectionLogo}>
-              <Img
-                src="/static/google-play-logo.png"
-                width="155"
-                height="31"
-                alt="Google Play"
-              />
-            </Section>
-          </Section>
-          <Section style={paragraphContent}>
-            <Hr style={hr} />
-            <Text style={heading}>DEVELOPER UPDATE</Text>
-            <Text style={paragraph}>Hello Google Play Developer,</Text>
-            <Text style={paragraph}>
-              We strive to make Google Play a safe and trusted experience for
-              users.
-            </Text>
-            <Text style={paragraph}>
-              We've added clarifications to our{' '}
-              <Link href="https://notifications.google.com" style={link}>
-                Target API Level policy
-              </Link>
-              . Because this is a clarification, our enforcement standards and
-              practices for this policy remain the same.
-            </Text>
-            <Section style={paragraphList}>
-              <Text style={paragraph}>
-                We’re noting exceptions to the{' '}
-                <Link href="https://notifications.google.com" style={link}>
-                  Target API Level policy
-                </Link>
-                , which can be found in our updated{' '}
-                <Link href="https://notifications.google.com" style={link}>
-                  Help Center article.
-                </Link>
-                These exceptions include permanently private apps and apps that
-                target automotive or wearables form factors and are bundled
-                within the same package.{' '}
-                <Link href="https://notifications.google.com" style={link}>
-                  Learn more
-                </Link>
-              </Text>
-            </Section>
-            <Text style={paragraph}>
-              We’re also extending the deadline to give you more time to adjust
-              to these changes. Now, apps that target API level 29 or below will
-              start experiencing reduced distribution starting{' '}
-              <b>Jan 31, 2023</b> instead of Nov 1, 2022. If you need more time
-              to update your app, you can request an extension to keep your app
-              discoverable to all users until May 1, 2023.
-            </Text>
-            <Hr style={hr} />
-          </Section>
-          <Section style={paragraphContent}>
-            <Text style={paragraph}>Thank you,</Text>
-            <Text style={{ ...paragraph, fontSize: '20px' }}>
-              The Google Play team
-            </Text>
-          </Section>
-          <Section style={containerContact}>
-            <Section
-              style={{
-                padding: '20px 20px',
-              }}
-            >
-              <Text style={paragraph}>Connect with us</Text>
-              <table>
-                <tr>
-                  <td>
-                    <Link href="https://notifications.google.com">
-                      <Img
-                        width="28"
-                        height="28"
-                        src="/static/google-play-chat.png"
-                      />
-                    </Link>
-                  </td>
-                  <td>
-                    <Link href="https://notifications.google.com">
-                      <Img
-                        width="28"
-                        height="28"
-                        src="/static/google-play-icon.png"
-                      />
-                    </Link>
-                  </td>
-                  <td>
-                    <Link href="https://notifications.google.com">
-                      <Img
-                        width="28"
-                        height="28"
-                        src="/static/google-play-academy.png"
-                      />
-                    </Link>
-                  </td>
-                </tr>
-              </table>
-            </Section>
-            <Img width="540" height="48" src="/static/google-play-footer.png" />
-          </Section>
-          <Section style={{ ...paragraphContent, paddingBottom: 30 }}>
-            <Text
-              style={{
-                ...paragraph,
-                fontSize: '12px',
-                textAlign: 'center',
-                margin: 0,
-              }}
-            >
-              © 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA
-              94043, USA
-            </Text>
-            <Text
-              style={{
-                ...paragraph,
-                fontSize: '12px',
-                textAlign: 'center',
-                margin: 0,
-              }}
-            >
-              You have received this mandatory email service announcement to
-              update you about important changes to your Google Play Developer
-              account.
-            </Text>
-          </Section>
-        </Container>
-      </Section>
-    </Html>
-  );
-}
-const fontFamily =
-  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-const main = {
-  backgroundColor: '#dbddde',
-};
-const sectionLogo = {
-  padding: '0 40px',
-};
-const headerBlue = {
-  display: 'flex',
-  justifyContent: 'end',
-  marginTop: -1,
-  marginRight: -2,
-  overflow: 'hidden',
-};
-const container = {
-  margin: '30px auto',
-  width: '610px',
-  backgroundColor: '#fff',
-  borderRadius: 5,
-  overflow: 'hidden',
-};
-const containerContact = {
-  backgroundColor: '#f0fcff',
-  width: '90%',
-  borderRadius: '5px',
-  overflow: 'hidden',
-  marginBottom: 20,
-};
-const heading = {
-  fontFamily,
-  fontSize: '14px',
-  lineHeight: '26px',
-  fontWeight: '700',
-  color: '#004dcf',
-};
-const paragraphContent = {
-  padding: '0 40px',
-};
-const paragraphList = {
-  paddingLeft: 40,
-};
-const paragraph = {
-  fontFamily,
-  fontSize: '14px',
-  lineHeight: '22px',
-  color: '#3c4043',
-};
-const link = {
-  ...paragraph,
-  color: '#004dcf',
-};
-const hr = {
-  borderColor: '#e8eaed',
-  margin: '20px 0',
-};

package/emails/koala-welcome.tsx DELETED Viewed

@@ -1,97 +0,0 @@
-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 { 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>
-        The sales intelligence platform that helps you uncover qualified leads.
-      </Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Img
-            src="https://assets.koala.live/images/koala-email-banner.png"
-            width="170"
-            height="50"
-            alt="Koala"
-            style={logo}
-          />
-          <Text style={paragraph}>Hi Zeno,</Text>
-          <Text style={paragraph}>
-            Welcome to Koala, the sales intelligence platform that helps you
-            uncover qualified leads and close deals faster.
-          </Text>
-          <Section style={btnContainer}>
-            <Button pX={12} pY={12} style={button} href="https://getkoala.com">
-              Get started
-            </Button>
-          </Section>
-          <Text style={paragraph}>
-            Best,
-            <br />
-            The Koala team
-          </Text>
-          <Hr style={hr} />
-          <Text style={footer}>408 Warren Rd - San Mateo, CA 94402</Text>
-        </Container>
-      </Section>
-    </Html>
-  );
-}
-const fontFamily =
-  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-const main = {
-  backgroundColor: '#ffffff',
-};
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-};
-const logo = {
-  margin: '0 auto',
-};
-const paragraph = {
-  fontFamily,
-  fontSize: '16px',
-  lineHeight: '26px',
-};
-const btnContainer = {
-  textAlign: 'center' as const,
-};
-const button = {
-  fontFamily,
-  backgroundColor: '#5F51E8',
-  borderRadius: '3px',
-  color: '#fff',
-  fontSize: '16px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-};
-const hr = {
-  borderColor: '#cccccc',
-  margin: '20px 0',
-};
-const footer = {
-  fontFamily,
-  color: '#8898aa',
-  fontSize: '12px',
-};

package/emails/linear-login-code.tsx DELETED Viewed

@@ -1,124 +0,0 @@
-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>Your login code for Linear</Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Img
-            src="/static/linear-logo.png"
-            width="42"
-            height="42"
-            alt="Linear"
-            style={logo}
-          />
-          <Text style={heading}>Your login code for Linear</Text>
-          <Section style={buttonContainer}>
-            <Button pY={11} pX={23} style={button} href="https://linear.app">
-              Login to Linear
-            </Button>
-          </Section>
-          <Text style={paragraph}>
-            This link and code will only be valid for the next 5 minutes. If the
-            link does not work, you can use the login verification code
-            directly:
-          </Text>
-          <Section>
-            <code style={code}>tt226-5398x</code>
-          </Section>
-          <Hr style={hr} />
-          <Link href="https://linear.app" style={reportLink}>
-            Linear
-          </Link>
-        </Container>
-      </Section>
-    </Html>
-  );
-}
-const logo = {
-  borderRadius: 21,
-  width: 42,
-  height: 42,
-};
-const fontFamily =
-  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-const main = {
-  backgroundColor: '#ffffff',
-};
-const container = {
-  margin: '0 auto',
-  padding: '20px 0 48px',
-  width: '560px',
-};
-const heading = {
-  fontFamily,
-  fontSize: '24px',
-  letterSpacing: '-0.5px',
-  lineHeight: '1.3',
-  fontWeight: '400',
-  color: '#484848',
-  padding: '17px 0 0',
-};
-const paragraph = {
-  fontFamily,
-  margin: '0 0 15px',
-  fontSize: '15px',
-  lineHeight: '1.4',
-  color: '#3c4149',
-};
-const buttonContainer = {
-  padding: '27px 0 27px',
-};
-const button = {
-  fontFamily,
-  backgroundColor: '#5e6ad2',
-  borderRadius: '3px',
-  fontWeight: '600',
-  color: '#fff',
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-};
-const reportLink = {
-  fontFamily,
-  fontSize: '14px',
-  color: '#b4becc',
-};
-const hr = {
-  borderColor: '#dfe1e4',
-  margin: '42px 0 26px',
-};
-const code = {
-  fontFamily: 'monospace',
-  fontWeight: '700',
-  padding: '1px 4px',
-  backgroundColor: '#dfe1e4',
-  letterSpacing: '-0.3px',
-  fontSize: '21px',
-  borderRadius: '4px',
-  color: '#3c4149',
-};

package/emails/notion-magic-link.tsx DELETED Viewed

@@ -1,133 +0,0 @@
-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 { 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>Log in with this magic link</Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Text style={h1}>Login</Text>
-          <Link
-            href="https://notion.so"
-            target="_blank"
-            style={{
-              ...link,
-              display: 'block',
-              marginBottom: '16px',
-            }}
-          >
-            Click here to log in with this magic link
-          </Link>
-          <Text style={{ ...text, marginBottom: '14px' }}>
-            Or, copy and paste this temporary login code:
-          </Text>
-          <code style={code}>sparo-ndigo-amurt-secan</code>
-          <Text
-            style={{
-              ...text,
-              color: '#ababab',
-              marginTop: '14px',
-              marginBottom: '16px',
-            }}
-          >
-            If you didn&apos;t try to login, you can safely ignore this email.
-          </Text>
-          <Text
-            style={{
-              ...text,
-              color: '#ababab',
-              marginTop: '12px',
-              marginBottom: '38px',
-            }}
-          >
-            Hint: You can set a permanent password in Settings & members → My
-            account.
-          </Text>
-          <Img
-            src="/static/notion-logo.png"
-            width="32"
-            height="32"
-            alt="Notion's Logo"
-          />
-          <Text style={footer}>
-            <Link
-              href="https://notion.so"
-              target="_blank"
-              style={{ ...link, color: '#898989' }}
-            >
-              Notion.so
-            </Link>
-            , the all-in-one-workspace
-            <br />
-            for your notes, tasks, wikis, and databases.
-          </Text>
-        </Container>
-      </Section>
-    </Html>
-  );
-}
-const main = {
-  backgroundColor: '#ffffff',
-};
-const container = {
-  paddingLeft: '12px',
-  paddingRight: '12px',
-  margin: '0 auto',
-};
-const h1 = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '24px',
-  fontWeight: 'bold',
-  margin: '40px 0',
-  padding: '0',
-};
-const link = {
-  color: '#2754C5',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  textDecoration: 'underline',
-};
-const text = {
-  color: '#333',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '14px',
-  margin: '24px 0',
-};
-const footer = {
-  color: '#898989',
-  fontFamily:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: '12px',
-  lineHeight: '22px',
-  marginTop: '12px',
-  marginBottom: '24px',
-};
-const code = {
-  display: 'inline-block',
-  padding: '16px 4.5%',
-  width: '90.5%',
-  backgroundColor: '#f4f4f4',
-  borderRadius: '5px',
-  border: '1px solid #eee',
-  color: '#333',
-};