promote-email-templates 0.1.6 → 0.1.7

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);
-  }
-};

package/.react-email/src/components/code-container.tsx

@@ -1,145 +0,0 @@
-import { LayoutGroup, motion } from 'framer-motion';
-import type { Language } from 'prism-react-renderer';
-import * as React from 'react';
-import { copyTextToClipboard } from '../utils';
-import languageMap from '../utils/language-map';
-import { tabTransition } from '../utils/constants';
-import { Code } from './code';
-import { IconButton } from './icons/icon-button';
-import { IconCheck } from './icons/icon-check';
-import { IconClipboard } from './icons/icon-clipboard';
-import { IconDownload } from './icons/icon-download';
-import { Tooltip } from './tooltip';
-
-interface CodeContainerProps {
-  markups: MarkupProps[];
-  activeLang: string;
-  setActiveLang: (lang: string) => void;
-}
-
-interface MarkupProps {
-  language: Language;
-  content: string;
-}
-
-export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
-  markups,
-  activeLang,
-  setActiveLang,
-}) => {
-  const [isCopied, setIsCopied] = React.useState(false);
-
-  const renderDownloadIcon = () => {
-    const value = markups.filter((markup) => markup.language === activeLang);
-    if (typeof value[0] === 'undefined') return;
-    const file = new File([value[0].content], `email.${value[0].language}`);
-    const url = URL.createObjectURL(file);
-
-    return (
-      <a
-        className="text-slate-11 transition ease-in-out duration-200 hover:text-slate-12"
-        download={file.name}
-        href={url}
-      >
-        <IconDownload />
-      </a>
-    );
-  };
-
-  const renderClipboardIcon = () => {
-    const handleClipboard = async () => {
-      const activeContent = markups.filter(({ language }) => {
-        return activeLang === language;
-      });
-      setIsCopied(true);
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      await copyTextToClipboard(activeContent[0]!.content);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 3000);
-    };
-
-    return (
-      <IconButton onClick={() => void handleClipboard()}>
-        {isCopied ? <IconCheck /> : <IconClipboard />}
-      </IconButton>
-    );
-  };
-
-  React.useEffect(() => {
-    setIsCopied(false);
-  }, [activeLang]);
-
-  return (
-    <div
-      className="border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md"
-      style={{
-        lineHeight: '130%',
-        background:
-          'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
-        boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
-      }}
-    >
-      <div className="h-9 border-b border-slate-6">
-        <div className="flex">
-          <LayoutGroup id="code">
-            {markups.map(({ language }) => {
-              const isCurrentLang = activeLang === language;
-              return (
-                <motion.button
-                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 hover:text-slate-12 ${
-                    activeLang !== language ? 'text-slate-11' : 'text-slate-12'
-                  }`}
-                  key={language}
-                  onClick={() => {
-                    setActiveLang(language);
-                  }}
-                >
-                  {isCurrentLang ? (
-                    <motion.span
-                      animate={{ opacity: 1 }}
-                      className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
-                      exit={{ opacity: 0 }}
-                      initial={{ opacity: 0 }}
-                      layoutId="code"
-                      transition={tabTransition}
-                    />
-                  ) : null}
-                  {languageMap[language]}
-                </motion.button>
-              );
-            })}
-          </LayoutGroup>
-        </div>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="absolute top-2 right-2 hidden md:block"
-          >
-            {renderClipboardIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-        </Tooltip>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="text-gray-11 absolute top-2 right-8 hidden md:block"
-          >
-            {renderDownloadIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Download</Tooltip.Content>
-        </Tooltip>
-      </div>
-      {markups.map(({ language, content }) => {
-        return (
-          <div
-            className={`${activeLang !== language && 'hidden'}`}
-            key={language}
-          >
-            <Code language={language}>{content}</Code>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

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

@@ -1,112 +0,0 @@
-import type { Language } from 'prism-react-renderer';
-import { Highlight } from 'prism-react-renderer';
-import * as React from 'react';
-import { cn } from '../utils';
-
-interface CodeProps {
-  children: string;
-  className?: string;
-  language?: Language;
-}
-
-const theme = {
-  plain: {
-    color: '#EDEDEF',
-    fontSize: 13,
-    fontFamily: 'MonoLisa, Menlo, monospace',
-  },
-  styles: [
-    {
-      types: ['comment'],
-      style: {
-        color: '#706F78',
-      },
-    },
-    {
-      types: ['atrule', 'keyword', 'attr-name', 'selector'],
-      style: {
-        color: '#7E7D86',
-      },
-    },
-    {
-      types: ['punctuation', 'operator'],
-      style: {
-        color: '#706F78',
-      },
-    },
-    {
-      types: ['class-name', 'function', 'tag', 'key-white'],
-      style: {
-        color: '#EDEDEF',
-      },
-    },
-  ],
-};
-
-export const Code: React.FC<Readonly<CodeProps>> = ({
-  children,
-  language = 'html',
-}) => {
-  const value = children.trim();
-
-  return (
-    <Highlight code={value} language={language} theme={theme}>
-      {({ tokens, getLineProps, getTokenProps }) => (
-        <>
-          <div
-            className="absolute right-0 top-0 h-px w-[200px]"
-            style={{
-              background:
-                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
-            }}
-          />
-          <pre className="p-4 h-[650px] overflow-auto">
-            {tokens.map((line, i) => {
-              const lineProps = getLineProps({
-                line,
-                key: i,
-              });
-              return (
-                <div
-                  key={i}
-                  {...lineProps}
-                  className={cn('whitespace-pre', {
-                    "before:text-slate-11 before:mr-2 before:content-['$']":
-                      language === 'bash' && tokens.length === 1,
-                  })}
-                >
-                  {line.map((token, key) => {
-                    const tokenProps = getTokenProps({
-                      token,
-                      key,
-                    });
-                    const isException =
-                      token.content === 'from' &&
-                      line[key + 1]?.content === ':';
-                    const newTypes = isException
-                      ? [...token.types, 'key-white']
-                      : token.types;
-                    token.types = newTypes;
-
-                    return (
-                      <React.Fragment key={key}>
-                        <span {...tokenProps} />
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              );
-            })}
-          </pre>
-          <div
-            className="absolute left-0 bottom-0 h-px w-[200px]"
-            style={{
-              background:
-                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
-            }}
-          />
-        </>
-      )}
-    </Highlight>
-  );
-};