promote-email-templates 0.1.6 → 0.1.8

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

@@ -1,91 +0,0 @@
-'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

@@ -1,59 +0,0 @@
-'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

@@ -1,35 +0,0 @@
-@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

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

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

@@ -1,36 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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","new-message-notification"]},{"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"]}];
-}

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

@@ -1,141 +0,0 @@
-'use client';
-
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import React from 'react';
-import { Toaster } from 'sonner';
-import { useHotreload } from '../../../hooks/use-hot-reload';
-import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
-import { CodeContainer } from '../../../components/code-container';
-import { Shell } from '../../../components/shell';
-import { Tooltip } from '../../../components/tooltip';
-import { useEmails } from '../../../contexts/emails';
-import { useRenderingMetadata } from '../../../hooks/use-rendering-metadata';
-import { RenderingError } from './rendering-error';
-
-interface PreviewProps {
-  slug: string;
-  emailPath: string;
-  renderingResult: EmailRenderingResult;
-}
-
-const Preview = ({
-  slug,
-  emailPath,
-  renderingResult: initialRenderingResult,
-}: PreviewProps) => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const activeView = searchParams.get('view') ?? 'desktop';
-  const activeLang = searchParams.get('lang') ?? 'jsx';
-  const { useEmailRenderingResult } = useEmails();
-
-  const renderingResult = useEmailRenderingResult(
-    emailPath,
-    initialRenderingResult,
-  );
-
-  const renderedEmailMetadata = useRenderingMetadata(
-    emailPath,
-    renderingResult,
-    initialRenderingResult,
-  );
-
-  if (process.env.NEXT_PUBLIC_IS_BUILDING !== 'true') {
-    // this will not change on runtime so it doesn't violate
-    // the rules of hooks
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useHotreload((changes) => {
-      const changeForThisEmail = changes.find((change) =>
-        change.filename.includes(slug),
-      );
-
-      if (typeof changeForThisEmail !== 'undefined') {
-        if (changeForThisEmail.event === 'unlink') {
-          router.push('/');
-        }
-      }
-    });
-  }
-
-  const handleViewChange = (view: string) => {
-    const params = new URLSearchParams(searchParams);
-    params.set('view', view);
-    router.push(`${pathname}?${params.toString()}`);
-  };
-
-  const handleLangChange = (lang: string) => {
-    const params = new URLSearchParams(searchParams);
-    params.set('view', 'source');
-    params.set('lang', lang);
-    router.push(`${pathname}?${params.toString()}`);
-  };
-
-  const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
-
-  return (
-    <Shell
-      activeView={hasNoErrors ? activeView : undefined}
-      currentEmailOpenSlug={slug}
-      markup={renderedEmailMetadata?.markup}
-      setActiveView={hasNoErrors ? handleViewChange : undefined}
-    >
-      {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div className="relative h-full">
-        {'error' in renderingResult ? (
-          <RenderingError error={renderingResult.error} />
-        ) : null}
-
-        {/* If this is undefined means that the initial server render of the email had errors */}
-        {hasNoErrors ? (
-          <>
-            {activeView === 'desktop' && (
-              <iframe
-                className="w-full bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)]"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
-            )}
-
-            {activeView === 'mobile' && (
-              <iframe
-                className="w-[360px] bg-white h-[calc(100vh_-_140px)] lg:h-[calc(100vh_-_70px)] mx-auto"
-                srcDoc={renderedEmailMetadata.markup}
-                title={slug}
-              />
-            )}
-
-            {activeView === 'source' && (
-              <div className="flex gap-6 mx-auto p-6 max-w-3xl">
-                <Tooltip.Provider>
-                  <CodeContainer
-                    activeLang={activeLang}
-                    markups={[
-                      {
-                        language: 'jsx',
-                        content: renderedEmailMetadata.reactMarkup,
-                      },
-                      {
-                        language: 'markup',
-                        content: renderedEmailMetadata.markup,
-                      },
-                      {
-                        language: 'markdown',
-                        content: renderedEmailMetadata.plainText,
-                      },
-                    ]}
-                    setActiveLang={handleLangChange}
-                  />
-                </Tooltip.Provider>
-              </div>
-            )}
-          </>
-        ) : null}
-        <Toaster />
-      </div>
-    </Shell>
-  );
-};
-
-export default Preview;

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

@@ -1,40 +0,0 @@
-'use client';
-import type { ErrorObject } from '../../../utils/types/error-object';
-
-export const RenderingError = (props: { error: ErrorObject }) => {
-  return (
-    <>
-      <div className="absolute inset-0 z-50 bg-black/80" />
-      <div className="md:max-w-[568px] lg:max-w-[968px] absolute left-[50%] top-[50%] min-h-[50vh] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-t-4 bg-white text-black p-6 shadow-lg duration-200 sm:rounded-lg rounded-t-sm">
-        <div className="flex flex-col max-w-full min-w-0 space-y-1.5">
-          <h2 className="text-lg flex items-center flex-shrink gap-4 font-semibold pb-2 leading-none tracking-tight">
-            <svg
-              className="h-6 w-6 text-red-600 font-extrabold"
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-              <path d="M12 9v4" />
-              <path d="M12 17h.01" />
-            </svg>
-            {props.error.name}: {props.error.message}
-          </h2>
-          {props.error.stack ? (
-            <div className="text-sm p-2 flex-grow scroll-px-4 overflow-x-auto bg-red-500 rounded-lg text-gray-100">
-              <pre className="font-mono w-full min-w-0 leading-7">
-                {props.error.stack}
-              </pre>
-            </div>
-          ) : undefined}
-        </div>
-      </div>
-    </>
-  );
-};

package/.react-email/src/components/button.tsx

@@ -1,90 +0,0 @@
-import * as SlotPrimitive from '@radix-ui/react-slot';
-import * as React from 'react';
-import { unreachable } from '../utils/unreachable';
-import { cn } from '../utils/cn';
-
-type ButtonElement = React.ElementRef<'button'>;
-type RootProps = React.ComponentPropsWithoutRef<'button'>;
-
-type Appearance = 'white' | 'gradient';
-type Size = '1' | '2' | '3' | '4';
-
-interface ButtonProps extends RootProps {
-  asChild?: boolean;
-  appearance?: Appearance;
-  size?: Size;
-}
-
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const classNames = cn(
-      getSize(size),
-      getAppearance(appearance),
-      'inline-flex items-center justify-center border font-medium',
-      className,
-    );
-
-    return asChild ? (
-      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
-        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      </SlotPrimitive.Slot>
-    ) : (
-      <button
-        className={classNames}
-        ref={forwardedRef}
-        type="button"
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-const getAppearance = (appearance: Appearance | undefined) => {
-  switch (appearance) {
-    case undefined:
-    case 'white':
-      return [
-        'bg-white text-black',
-        'hover:bg-white/90',
-        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90',
-      ];
-    case 'gradient':
-      return [
-        'bg-gradient backdrop-blur-[20px] border-[#34343A]',
-        'hover:bg-gradientHover',
-        'focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-gradientHover',
-      ];
-    default:
-      unreachable(appearance);
-  }
-};
-
-const getSize = (size: Size | undefined) => {
-  switch (size) {
-    case '1':
-      return '';
-    case undefined:
-    case '2':
-      return 'text-[14px] h-8 px-3 rounded-md gap-2';
-    case '3':
-      return 'text-[14px] h-10 px-4 rounded-md gap-2';
-    case '4':
-      return 'text-base h-11 px-4 rounded-md gap-2';
-    default:
-      unreachable(size);
-  }
-};