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

package/dist/commands/dev.js

@@ -104,24 +104,36 @@ const createAppFiles = async () => {
     }
 };
 const generateEmailsPreview = async () => {
-    const spinner = (0, ora_1.default)('Generating emails preview').start();
-    const hasEmailsDirectory = fs_1.default.existsSync(utils_1.CLIENT_EMAILS_PATH);
+    try {
+        const spinner = (0, ora_1.default)('Generating emails preview').start();
+        await createEmailPreviews();
+        await createStatisFiles();
+        await createComponents();
+        spinner.stopAndPersist({
+            symbol: log_symbols_1.default.success,
+            text: 'Emails preview generated',
+        });
+    }
+    catch (error) {
+        console.log({ error });
+    }
+};
+const createEmailPreviews = async () => {
+    const hasEmailsDirectory = (0, utils_1.checkDirectoryExist)(utils_1.CLIENT_EMAILS_PATH);
     const isEmailsDirectoryEmpty = hasEmailsDirectory
         ? await (0, utils_1.checkEmptyDirectory)(utils_1.CLIENT_EMAILS_PATH)
         : true;
     if (isEmailsDirectoryEmpty) {
-        return spinner.stopAndPersist({
-            symbol: log_symbols_1.default.warning,
-            text: 'Emails preview directory is empty',
-        });
     }
     const hasPackageEmailsDirectory = (0, utils_1.checkDirectoryExist)(utils_1.PACKAGE_EMAILS_PATH);
-    const hasPackageStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.REACT_EMAIL_ROOT}/public/static`);
-    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
     if (hasPackageEmailsDirectory) {
         await fs_1.default.promises.rm(utils_1.PACKAGE_EMAILS_PATH, { recursive: true });
     }
     await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, utils_1.PACKAGE_EMAILS_PATH);
+};
+const createStatisFiles = async () => {
+    const hasPackageStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.REACT_EMAIL_ROOT}/public/static`);
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
     if (hasPackageStaticDirectory) {
         await fs_1.default.promises.rm(`${utils_1.REACT_EMAIL_ROOT}/public/static`, {
             recursive: true,
@@ -130,10 +142,18 @@ const generateEmailsPreview = async () => {
     if (hasStaticDirectory) {
         await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${utils_1.REACT_EMAIL_ROOT}/public/static`);
     }
-    return spinner.stopAndPersist({
-        symbol: log_symbols_1.default.success,
-        text: 'Emails preview generated',
-    });
+};
+const createComponents = async () => {
+    const hasPackageComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.PACKAGE_EMAILS_PATH}/components`);
+    const hasComponentsDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/components`);
+    if (hasPackageComponentsDirectory) {
+        await fs_1.default.promises.rm(`${utils_1.PACKAGE_EMAILS_PATH}/components`, {
+            recursive: true,
+        });
+    }
+    if (hasComponentsDirectory) {
+        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/components`, `${utils_1.PACKAGE_EMAILS_PATH}/components`);
+    }
 };
 const syncPkg = async () => {
     const previewPkg = (0, utils_1.getPreviewPkg)();
@@ -148,7 +168,7 @@ const syncPkg = async () => {
     await fs_1.default.promises.writeFile(path_1.default.join(utils_1.REACT_EMAIL_ROOT, 'package.json'), JSON.stringify(pkg));
 };
 const installDependencies = async () => {
-    const spinner = (0, ora_1.default)('Installing dependencies...').start();
+    const spinner = (0, ora_1.default)('Installing dependencies...\n').start();
     shelljs_1.default.cd(path_1.default.join(utils_1.REACT_EMAIL_ROOT));
     shelljs_1.default.exec('yarn');
     spinner.stopAndPersist({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "1.4.2-canary.2",
+  "version": "1.4.2-canary.3",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/index.js"
@@ -48,4 +48,4 @@
     "prettier": "2.7.1",
     "ts-node": "10.9.1"
   }
-}
+}

package/readme.md

@@ -0,0 +1,44 @@
+![React email cover](https://react.email/static/covers/react-email.png)
+
+<div align="center"><strong>React Email</strong></div>
+<div align="center">The next generation of writing emails.<br />High-quality, unstyled components for creating emails.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a> 
+<span> · </span>
+<a href="https://github.com/zenorocha/react-email">GitHub</a> 
+<span> · </span>
+<a href="https://react.email/discord">Discord</a>
+</div>
+
+## Getting started
+
+To get started, open a new shell and run:
+
+```sh
+npx create-email
+```
+
+This will create a new folder called `emails` with a few email templates.
+
+## Commands
+
+### `email dev`
+
+Starts a local development server that will watch your files and automatically rebuild your email when you make changes.
+
+```sh
+npx react-email dev
+```
+
+### `email export`
+
+Generates the plain HTML files of your emails into a `out` directory.
+
+```sh
+npx react-email export
+```
+
+## License
+
+MIT License

package/source/commands/dev.ts

@@ -122,33 +122,48 @@ const createAppFiles = async () => {
 };
 
 const generateEmailsPreview = async () => {
-  const spinner = ora('Generating emails preview').start();
+  try {
+    const spinner = ora('Generating emails preview').start();
+
+    await createEmailPreviews();
+    await createStatisFiles();
+    await createComponents();
+
+    spinner.stopAndPersist({
+      symbol: logSymbols.success,
+      text: 'Emails preview generated',
+    });
+  } catch (error) {
+    console.log({ error });
+  }
+};
+
+const createEmailPreviews = async () => {
+  const hasEmailsDirectory = checkDirectoryExist(CLIENT_EMAILS_PATH);
 
-  const hasEmailsDirectory = fs.existsSync(CLIENT_EMAILS_PATH);
   const isEmailsDirectoryEmpty = hasEmailsDirectory
     ? await checkEmptyDirectory(CLIENT_EMAILS_PATH)
     : true;
 
   if (isEmailsDirectoryEmpty) {
-    return spinner.stopAndPersist({
-      symbol: logSymbols.warning,
-      text: 'Emails preview directory is empty',
-    });
   }
 
   const hasPackageEmailsDirectory = checkDirectoryExist(PACKAGE_EMAILS_PATH);
-  const hasPackageStaticDirectory = checkDirectoryExist(
-    `${REACT_EMAIL_ROOT}/public/static`,
-  );
-  const hasStaticDirectory = checkDirectoryExist(
-    `${CLIENT_EMAILS_PATH}/static`,
-  );
 
   if (hasPackageEmailsDirectory) {
     await fs.promises.rm(PACKAGE_EMAILS_PATH, { recursive: true });
   }
 
   await copy(`${CLIENT_EMAILS_PATH}/*{.tsx,.jsx}`, PACKAGE_EMAILS_PATH);
+};
+
+const createStatisFiles = async () => {
+  const hasPackageStaticDirectory = checkDirectoryExist(
+    `${REACT_EMAIL_ROOT}/public/static`,
+  );
+  const hasStaticDirectory = checkDirectoryExist(
+    `${CLIENT_EMAILS_PATH}/static`,
+  );
 
   if (hasPackageStaticDirectory) {
     await fs.promises.rm(`${REACT_EMAIL_ROOT}/public/static`, {
@@ -162,11 +177,29 @@ const generateEmailsPreview = async () => {
       `${REACT_EMAIL_ROOT}/public/static`,
     );
   }
+};
 
-  return spinner.stopAndPersist({
-    symbol: logSymbols.success,
-    text: 'Emails preview generated',
-  });
+const createComponents = async () => {
+  const hasPackageComponentsDirectory = checkDirectoryExist(
+    `${PACKAGE_EMAILS_PATH}/components`,
+  );
+
+  const hasComponentsDirectory = checkDirectoryExist(
+    `${CLIENT_EMAILS_PATH}/components`,
+  );
+
+  if (hasPackageComponentsDirectory) {
+    await fs.promises.rm(`${PACKAGE_EMAILS_PATH}/components`, {
+      recursive: true,
+    });
+  }
+
+  if (hasComponentsDirectory) {
+    await copy(
+      `${CLIENT_EMAILS_PATH}/components`,
+      `${PACKAGE_EMAILS_PATH}/components`,
+    );
+  }
 };
 
 const syncPkg = async () => {
@@ -186,7 +219,7 @@ const syncPkg = async () => {
 };
 
 const installDependencies = async () => {
-  const spinner = ora('Installing dependencies...').start();
+  const spinner = ora('Installing dependencies...\n').start();
 
   shell.cd(path.join(REACT_EMAIL_ROOT));
   shell.exec('yarn');

package/.react-email/src/pages/_app.tsx

@@ -1,26 +0,0 @@
-import '../styles/globals.css';
-import type { AppProps } from 'next/app';
-import { Inter } from '@next/font/google';
-import classnames from 'classnames';
-import Head from 'next/head';
-import { Tooltip } from '../components/tooltip';
-
-export const inter = Inter({
-  subsets: ['latin'],
-  variable: '--font-inter',
-});
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <div className={classnames(inter.variable, 'font-sans')}>
-      <Head>
-        <title>React Email</title>
-      </Head>
-      <Tooltip.Provider>
-        <Component {...pageProps} />
-      </Tooltip.Provider>
-    </div>
-  );
-}
-
-export default MyApp;

package/emails/airbnb-review.tsx

@@ -1,163 +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>Read Alex's review</Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Img
-            src="/static/airbnb-logo.png"
-            width="96"
-            height="30"
-            alt="Airbnb"
-          />
-          <Section>
-            <Img
-              src="/static/airbnb-review-user.jpg"
-              width="96"
-              height="96"
-              alt="Alex"
-              style={userImage}
-            />
-          </Section>
-          <Text style={heading}>Here's what Alex wrote</Text>
-          <Text style={review}>
-            “Zeno 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!”
-          </Text>
-          <Text style={paragraph}>
-            Now that the review period is over, we’ve posted Alex’s review to
-            your Airbnb profile.
-          </Text>
-          <Text style={paragraph}>
-            While it’s too late to write a review of your own, you can send your
-            feedback to Alex using your Airbnb message thread.
-          </Text>
-          <Section style={{ padding: '16px 0 20px' }}>
-            <Button pY={19} style={button} href="https://airbnb.com/">
-              Send My Feedback
-            </Button>
-          </Section>
-          <Hr style={hr} />
-          <Text style={{ ...paragraph, fontWeight: '700' }}>
-            Commom 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>
-        </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',
-  width: '580px',
-};
-
-const userImage = {
-  margin: '0 auto',
-  marginBottom: '16px',
-  borderRadius: '50%',
-};
-
-const heading = {
-  fontFamily,
-  fontSize: '32px',
-  lineHeight: '1.3',
-  fontWeight: '700',
-  color: '#484848',
-};
-
-const paragraph = {
-  fontFamily,
-  fontSize: '18px',
-  lineHeight: '1.4',
-  color: '#484848',
-};
-
-const review = {
-  ...paragraph,
-  padding: '24px',
-  backgroundColor: '#f2f3f3',
-  borderRadius: '4px',
-};
-
-const button = {
-  fontFamily,
-  backgroundColor: '#ff5a5f',
-  borderRadius: '3px',
-  color: '#fff',
-  fontSize: '18px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  width: '100%',
-};
-
-const link = {
-  ...paragraph,
-  color: '#ff5a5f',
-  display: 'block',
-};
-
-const reportLink = {
-  fontFamily,
-  fontSize: '14px',
-  color: '#9ca299',
-  textDecoration: 'underline',
-};
-
-const hr = {
-  borderColor: '#cccccc',
-  margin: '20px 0',
-};
-
-const footer = {
-  fontFamily,
-  color: '#9ca299',
-  fontSize: '14px',
-  marginBottom: '10px',
-};

package/emails/dropbox-reset-password.tsx

@@ -1,85 +0,0 @@
-import { Button } from '@react-email/button';
-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>Dropbox reset your password</Preview>
-      <Section style={main}>
-        <Container style={container}>
-          <Img src="/static/dropbox.png" width="40" height="33" alt="Dropbox" />
-          <Section>
-            <Text style={text}>Hi Zeno,</Text>
-            <Text style={text}>
-              Someone recently requested a password change for your Dropbox
-              account. If this was you, you can set a new password here:
-            </Text>
-            <Button style={button} href="https://dropbox.com">
-              Reset password
-            </Button>
-            <Text style={text}>
-              If you don&apos;t want to change your password or didn&apos;t
-              request this, just ignore and delete this message.
-            </Text>
-            <Text style={text}>
-              To keep your account secure, please don&apos;t forward this email
-              to anyone. See our Help Center for{' '}
-              <Link style={anchor} href="https://dropbox.com">
-                more security tips.
-              </Link>
-            </Text>
-            <Text style={text}>Happy Dropboxing!</Text>
-          </Section>
-        </Container>
-      </Section>
-    </Html>
-  );
-}
-
-const main = {
-  backgroundColor: '#f6f9fc',
-  padding: '10px 0',
-};
-
-const container = {
-  margin: '0 auto',
-  backgroundColor: '#ffffff',
-  border: '1px solid #f0f0f0',
-  width: '600px',
-  padding: '45px',
-};
-
-const text = {
-  fontSize: '16px',
-  fontFamily:
-    "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
-  fontWeight: '300',
-  color: '#404040',
-  lineHeight: '26px',
-};
-
-const button = {
-  backgroundColor: '#007ee6',
-  borderRadius: '4px',
-  color: '#fff',
-  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  width: '210px',
-  padding: '14px 7px',
-};
-
-const anchor = {
-  textDecoration: 'underline',
-};