promote-email-templates 0.0.2 → 0.0.3

package/.react-email/.eslintrc.js

@@ -0,0 +1,52 @@
+const { resolve } = require('node:path');
+
+const project = resolve(process.cwd(), './tsconfig.json');
+
+/** @type {import('eslint').ESLint.ConfigData} */
+module.exports = {
+  extends: [
+    "@vercel/style-guide/eslint/node",
+    "@vercel/style-guide/eslint/browser",
+    "@vercel/style-guide/eslint/typescript",
+    "@vercel/style-guide/eslint/react",
+    "@vercel/style-guide/eslint/next",
+    "eslint-config-turbo",
+  ]
+    .map(require.resolve)
+    .concat(["eslint-config-prettier"]),
+  parserOptions: {
+    project,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ['cli/', 'cli/index.mjs', "node_modules/", "dist/"],
+  rules: {
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "import/no-default-export": "off",
+    "jsx-a11y/no-autofocus": "off",
+    "no-alert": "off",
+    "react/no-array-index-key": "off",
+    "react/function-component-definition": [
+      2,
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
+    'import/no-cycle': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'turbo/no-undeclared-env-vars': 'off',
+    'eslint-comments/require-description': 'off',
+    'no-console': 'off',
+  },
+};

package/.react-email/.prettierignore

@@ -0,0 +1,3 @@
+.react-email
+dist
+preview/.next

package/.react-email/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  quoteProps: 'consistent',
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 80,
+  useTabs: false,
+  bracketSpacing: true,
+};

package/.react-email/license.md

@@ -0,0 +1,7 @@
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/.react-email/next.config.js

@@ -0,0 +1,36 @@
+
+const path = require('path');
+/** @type {import('next').NextConfig} */
+module.exports = {
+  env: {
+    ...{"NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH":"./emails","NEXT_PUBLIC_CLI_PACKAGE_LOCATION":"PLACEHOLDER","NEXT_PUBLIC_OS_PATH_SEPARATOR":"/","NEXT_PUBLIC_USER_PROJECT_LOCATION":"PLACEHOLDER","NEXT_PUBLIC_IS_BUILDING":"true"},
+    NEXT_PUBLIC_USER_PROJECT_LOCATION: path.resolve(process.cwd(), '../'),
+    NEXT_PUBLIC_CLI_PACKAGE_LOCATION: process.cwd(),
+  },
+  // this is needed so that the code for building emails works properly
+  webpack: (
+    /** @type {import('webpack').Configuration & { externals: string[] }} */
+    config,
+    { isServer }
+  ) => {
+    if (isServer) {
+      config.externals.push('esbuild');
+    }
+
+    return config;
+  },
+  typescript: {
+    ignoreBuildErrors: true
+  },
+  eslint: {
+    ignoreDuringBuilds: true
+  },
+  experimental: {
+    webpackBuildWorker: true,
+    serverComponentsExternalPackages: [
+      '@react-email/components',
+      '@react-email/render',
+      '@react-email/tailwind',
+    ],
+  },
+}

package/.react-email/package.json

@@ -0,0 +1 @@
+{"name":"react-email","version":"2.1.0","description":"A live preview of your emails right in your browser.","bin":{"email":"./cli/index.js"},"license":"MIT","repository":{"type":"git","url":"https://github.com/resend/react-email.git","directory":"packages/react-email"},"keywords":["react","email"],"engines":{"node":">=18.0.0"},"dependencies":{"@radix-ui/colors":"1.0.1","@radix-ui/react-collapsible":"1.0.3","@radix-ui/react-popover":"1.0.6","@radix-ui/react-slot":"1.0.2","@radix-ui/react-toggle-group":"1.0.4","@radix-ui/react-tooltip":"1.0.6","@react-email/components":"0.0.15","@react-email/render":"0.0.12","@swc/core":"1.3.101","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@types/webpack":"5.28.5","autoprefixer":"10.4.14","chalk":"4.1.2","chokidar":"3.5.3","clsx":"2.1.0","commander":"11.1.0","debounce":"2.0.0","esbuild":"0.19.11","eslint-config-prettier":"9.0.0","eslint-config-turbo":"1.10.12","framer-motion":"10.17.4","glob":"10.3.4","log-symbols":"4.1.0","mime-types":"2.1.35","next":"14.1.0","normalize-path":"3.0.0","ora":"5.4.1","postcss":"8.4.35","prism-react-renderer":"2.1.0","react":"^18.2.0","react-dom":"^18.2.0","shelljs":"0.8.5","socket.io":"4.7.3","socket.io-client":"4.7.3","sonner":"1.3.1","source-map-js":"1.0.2","stacktrace-parser":"0.1.10","tailwind-merge":"2.2.0","tailwindcss":"3.4.0","tree-cli":"0.6.7","typescript":"5.1.6","sharp":"0.33.2"},"devDependencies":{"@types/fs-extra":"11.0.1","@types/mime-types":"2.1.4","@types/node":"18.0.0","@types/normalize-path":"3.0.2","@types/shelljs":"0.8.15","@vercel/style-guide":"5.1.0","eslint":"8.50.0","tsup":"7.2.0","tsx":"4.7.0","vitest":"1.1.3","watch":"1.0.2"},"scripts":{"build":"next build","dev":"tsup --watch","test":"vitest run","clean":"rm -rf dist","lint":"eslint . && tsc","start":"next start"}}

package/.react-email/postcss.config.js

@@ -0,0 +1,8 @@
+const path = require('node:path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: { config: path.resolve(__dirname, 'tailwind.config.ts') },
+    autoprefixer: {},
+  },
+}

package/.react-email/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/resend/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/.react-email/src/actions/get-email-path-from-slug.ts

@@ -0,0 +1,26 @@
+'use server';
+import path from 'node:path';
+import fs from 'node:fs';
+import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const getEmailPathFromSlug = async (slug: string) => {
+  if (['.tsx', '.jsx', '.js'].includes(path.extname(slug)))
+    return path.join(emailsDirectoryAbsolutePath, slug);
+
+  const pathWithoutExtension = path.join(emailsDirectoryAbsolutePath, slug);
+
+  if (fs.existsSync(`${pathWithoutExtension}.tsx`)) {
+    return `${pathWithoutExtension}.tsx`;
+  } else if (fs.existsSync(`${pathWithoutExtension}.jsx`)) {
+    return `${pathWithoutExtension}.jsx`;
+  } else if (fs.existsSync(`${pathWithoutExtension}.js`)) {
+    return `${pathWithoutExtension}.jsx`;
+  }
+
+  throw new Error(
+    `Could not find your email file based on the slug by guessing the file extension. Tried .tsx, .jsx and .js.
+
+    This is most likely not an issue with the preview server. It most likely is that the email doesn't exist.`,
+  );
+};

package/.react-email/src/actions/get-emails-directory-metadata.spec.ts

@@ -0,0 +1,73 @@
+import path from 'node:path';
+import { getEmailsDirectoryMetadata } from './get-emails-directory-metadata';
+
+test('getEmailsDirectoryMetadata on demo emails', async () => {
+  const emailsDirectoryPath = path.resolve(
+    __dirname,
+    '../../../../apps/demo/emails/',
+  );
+  expect(await getEmailsDirectoryMetadata(emailsDirectoryPath)).toEqual({
+    absolutePath: emailsDirectoryPath,
+    directoryName: 'emails',
+    emailFilenames: [],
+    subDirectories: [
+      {
+        absolutePath: `${emailsDirectoryPath}/magic-links`,
+        directoryName: 'magic-links',
+        emailFilenames: [
+          'aws-verify-email',
+          'linear-login-code',
+          'notion-magic-link',
+          'plaid-verify-identity',
+          'raycast-magic-link',
+          'slack-confirm',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/newsletters`,
+        directoryName: 'newsletters',
+        emailFilenames: [
+          'codepen-challengers',
+          'google-play-policy-update',
+          'stack-overflow-tips',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/notifications`,
+        directoryName: 'notifications',
+        emailFilenames: [
+          'github-access-token',
+          'vercel-invite-user',
+          'yelp-recent-login',
+        ],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/receipts`,
+        directoryName: 'receipts',
+        emailFilenames: ['apple-receipt', 'nike-receipt'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reset-password`,
+        directoryName: 'reset-password',
+        emailFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/reviews`,
+        directoryName: 'reviews',
+        emailFilenames: ['airbnb-review', 'amazon-review'],
+        subDirectories: [],
+      },
+      {
+        absolutePath: `${emailsDirectoryPath}/welcome`,
+        directoryName: 'welcome',
+        emailFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
+        subDirectories: [],
+      },
+    ],
+  });
+});

package/.react-email/src/actions/get-emails-directory-metadata.ts

@@ -0,0 +1,91 @@
+'use server';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import fs from 'node:fs';
+import path from 'node:path';
+
+const isFileAnEmail = (fullPath: string): boolean => {
+  const stat = fs.statSync(fullPath);
+
+  if (stat.isDirectory()) return false;
+
+  const { ext } = path.parse(fullPath);
+
+  if (!['.js', '.tsx', '.jsx'].includes(ext)) return false;
+
+  // check with a heuristic to see if the file has at least
+  // a default export
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+
+  return /\bexport\s+default\b/gm.test(fileContents);
+};
+
+export interface EmailsDirectory {
+  absolutePath: string;
+  directoryName: string;
+  emailFilenames: string[];
+  subDirectories: EmailsDirectory[];
+}
+
+const mergeDirectoriesWithSubDirectories = (
+  emailsDirectoryMetadata: EmailsDirectory,
+): EmailsDirectory => {
+  let currentResultingMergedDirectory: EmailsDirectory =
+    emailsDirectoryMetadata;
+
+  while (
+    currentResultingMergedDirectory.emailFilenames.length === 0 &&
+    currentResultingMergedDirectory.subDirectories.length === 1
+  ) {
+    const onlySubDirectory = currentResultingMergedDirectory.subDirectories[0]!;
+    currentResultingMergedDirectory = {
+      subDirectories: onlySubDirectory.subDirectories,
+      emailFilenames: onlySubDirectory.emailFilenames,
+      absolutePath: onlySubDirectory.absolutePath,
+      directoryName: path.join(
+        currentResultingMergedDirectory.directoryName,
+        onlySubDirectory.directoryName,
+      ),
+    };
+  }
+
+  return currentResultingMergedDirectory;
+};
+
+export const getEmailsDirectoryMetadata = async (
+  absolutePathToEmailsDirectory: string,
+): Promise<EmailsDirectory | undefined> => {
+  if (!fs.existsSync(absolutePathToEmailsDirectory)) return;
+
+  const dirents = await fs.promises.readdir(absolutePathToEmailsDirectory, {
+    withFileTypes: true,
+  });
+
+  const emailFilenames = dirents
+    .filter((dirent) =>
+      isFileAnEmail(path.join(absolutePathToEmailsDirectory, dirent.name)),
+    )
+    .map((dirent) => dirent.name.replace(path.extname(dirent.name), ''));
+
+  const subDirectories = await Promise.all(
+    dirents
+      .filter(
+        (dirent) =>
+          dirent.isDirectory() &&
+          !dirent.name.startsWith('_') &&
+          dirent.name !== 'static',
+      )
+      .map(
+        (dirent) =>
+          getEmailsDirectoryMetadata(
+            path.join(absolutePathToEmailsDirectory, dirent.name),
+          ) as Promise<EmailsDirectory>,
+      ),
+  );
+
+  return mergeDirectoriesWithSubDirectories({
+    absolutePath: absolutePathToEmailsDirectory,
+    directoryName: absolutePathToEmailsDirectory.split(path.sep).pop()!,
+    emailFilenames,
+    subDirectories,
+  });
+};

package/.react-email/src/actions/render-email-by-path.tsx

@@ -0,0 +1,59 @@
+'use server';
+import fs from 'node:fs';
+import { renderAsync } from '@react-email/render';
+import { getEmailComponent } from '../utils/get-email-component';
+import type { ErrorObject } from '../utils/types/error-object';
+import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
+
+export interface RenderedEmailMetadata {
+  markup: string;
+  plainText: string;
+  reactMarkup: string;
+}
+
+export type EmailRenderingResult =
+  | RenderedEmailMetadata
+  | {
+      error: ErrorObject;
+    };
+
+export const renderEmailByPath = async (
+  emailPath: string,
+): Promise<EmailRenderingResult> => {
+  const result = await getEmailComponent(emailPath);
+
+  if ('error' in result) {
+    return { error: result.error };
+  }
+
+  const { emailComponent: Email, sourceMapToOriginalFile } = result;
+
+  const previewProps = Email.PreviewProps || {};
+  const EmailComponent = Email as React.FC;
+  try {
+    const markup = await renderAsync(<EmailComponent {...previewProps} />, {
+      pretty: true,
+    });
+    const plainText = await renderAsync(<EmailComponent {...previewProps} />, {
+      plainText: true,
+    });
+
+    const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
+
+    return {
+      markup,
+      plainText,
+      reactMarkup,
+    };
+  } catch (exception) {
+    const error = exception as Error;
+
+    return {
+      error: improveErrorWithSourceMap(
+        error,
+        emailPath,
+        sourceMapToOriginalFile,
+      ),
+    };
+  }
+};

package/.react-email/src/app/globals.css

@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+.popup-open iframe {
+  pointer-events: none;
+}
+
+nav > div > div > .line {
+  display: none;
+}

package/.react-email/src/app/inter.ts

@@ -0,0 +1,7 @@
+import { Inter } from 'next/font/google';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
+});

package/.react-email/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { getEmailsDirectoryMetadata } from '../actions/get-emails-directory-metadata';
+import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import { EmailsProvider } from '../contexts/emails';
+import { inter } from './inter';
+
+export const metadata: Metadata = {
+  title: 'React Email',
+};
+
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+  const emailsDirectoryMetadata = await getEmailsDirectoryMetadata(
+    emailsDirectoryAbsolutePath,
+  );
+
+  if (typeof emailsDirectoryMetadata === 'undefined') {
+    throw new Error(
+      `Could not find the emails directory specified under ${emailsDirectoryAbsolutePath}!`,
+    );
+  }
+
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <EmailsProvider
+          initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
+        >
+          {children}
+        </EmailsProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;

package/.react-email/src/app/page.tsx

@@ -0,0 +1,47 @@
+import path from 'node:path';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Button, Heading, Text } from '../components';
+import { Shell } from '../components/shell';
+import { emailsDirectoryAbsolutePath } from '../utils/emails-directory-absolute-path';
+import logo from './logo.png';
+
+const Home = () => {
+  const baseEmailsDirectoryName = path.basename(emailsDirectoryAbsolutePath);
+
+  return (
+    <Shell>
+      <div className="relative max-w-lg mx-auto p-8 flex items-center justify-center h-[inherit]">
+        <div className="relative z-10 flex flex-col text-center items-center">
+          <Image
+            alt="React Email Icon"
+            className="mb-8"
+            height={144}
+            src={logo}
+            style={{
+              borderRadius: 34,
+              boxShadow: '0px 10px 200px 20px #2B7CA080',
+            }}
+            width={141}
+          />
+          <Heading as="h2" size="6" weight="medium">
+            Welcome to React Email
+          </Heading>
+          <Text as="p" className="mt-2 mb-4">
+            To start developing your emails, you can create a<br />
+            <code className="text-slate-12">.jsx</code> or{' '}
+            <code className="text-slate-12">.tsx</code> file under your{' '}
+            <code className="text-slate-12">{baseEmailsDirectoryName}</code>{' '}
+            folder.
+          </Text>
+
+          <Button asChild size="3">
+            <Link href="https://react.email/docs">Check the docs</Link>
+          </Button>
+        </div>
+      </div>
+    </Shell>
+  );
+};
+
+export default Home;

package/.react-email/src/app/preview/[...slug]/page.tsx

@@ -0,0 +1,65 @@
+import { Suspense } from 'react';
+import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
+import { getEmailsDirectoryMetadata } from '../../../actions/get-emails-directory-metadata';
+import { renderEmailByPath } from '../../../actions/render-email-by-path';
+import { emailsDirectoryAbsolutePath } from '../../../utils/emails-directory-absolute-path';
+import Home from '../../page';
+import Preview from './preview';
+
+export const dynamicParams = true;
+
+export interface PreviewParams {
+  slug: string[];
+}
+
+export default async function Page({ params }: { params: PreviewParams }) {
+  // will come in here as segments of a relative path to the email
+  // ex: ['authentication', 'verify-password.tsx']
+  const slug = params.slug.join('/');
+  const emailsDirMetadata = await getEmailsDirectoryMetadata(
+    emailsDirectoryAbsolutePath,
+  );
+
+  if (typeof emailsDirMetadata === 'undefined') {
+    throw new Error(
+      `Could not find the emails directory specified under ${emailsDirectoryAbsolutePath}!
+
+This is most likely not an issue with the preview server. Maybe there was a typo on the "--dir" flag?`,
+    );
+  }
+
+  const emailPath = await getEmailPathFromSlug(slug);
+
+  const emailRenderingResult = await renderEmailByPath(emailPath);
+
+  if (
+    'error' in emailRenderingResult &&
+    process.env.NEXT_PUBLIC_IS_BUILDING === 'true'
+  ) {
+    throw new Error(emailRenderingResult.error.message, {
+      cause: emailRenderingResult.error,
+    });
+  }
+
+  return (
+    // This suspense is so that this page doesn't throw warnings
+    // on the build of the preview server de-opting into
+    // client-side rendering on build
+    <Suspense fallback={<Home />}>
+      <Preview
+        emailPath={emailPath}
+        renderingResult={emailRenderingResult}
+        slug={slug}
+      />
+    </Suspense>
+  );
+}
+
+export function generateMetadata({ params }: { params: PreviewParams }) {
+  return { title: `${params.slug.join('/')} — React Email` };
+}
+
+
+export async function generateStaticParams() { 
+  return [{"slug":["admin","abort-order-request"]},{"slug":["admin","revert-payment-request-admin"]},{"slug":["all","welcome"]},{"slug":["brand","evidences-accepted-brand"]},{"slug":["brand","evidences-submitted-brand"]},{"slug":["brand","new-job-application-received-brand"]},{"slug":["brand","new-job-created-brand"]},{"slug":["brand","new-order-created-brand"]},{"slug":["brand","order-accepted-brand"]},{"slug":["brand","order-cancelled-brand"]},{"slug":["brand","order-rejected-brand"]},{"slug":["creator","evidences-approved-creator"]},{"slug":["creator","evidences-rejected-creator"]},{"slug":["creator","new-job-application-unapproved-creator"]},{"slug":["creator","new-order-created-creator"]},{"slug":["creator","order-cancelled-creator"]},{"slug":["creator","order-payment-creator"]},{"slug":["shared","components","base-head"]},{"slug":["shared","components","comment-component"]},{"slug":["shared","components","footer"]},{"slug":["shared","components","header"]},{"slug":["shared","components","new-order-info"]},{"slug":["shared","components","payment-amount"]},{"slug":["shared","components","user-Info"]}];
+}