promote-email-templates 0.0.19 → 0.1.1

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

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

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

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

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

@@ -0,0 +1,112 @@
+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>
+  );
+};

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

@@ -0,0 +1,113 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type As, unreachable, cn } from '../utils';
+
+export type HeadingSize =
+  | '1'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10';
+export type HeadingColor = 'white' | 'gray';
+export type HeadingWeight = 'medium' | 'bold';
+
+interface HeadingOwnProps {
+  size?: HeadingSize;
+  color?: HeadingColor;
+  weight?: HeadingWeight;
+}
+
+type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
+
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  Readonly<HeadingProps>
+>(
+  (
+    {
+      as: Tag = 'h1',
+      size = '3',
+      className,
+      color = 'white',
+      children,
+      weight = 'bold',
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      className={cn(
+        className,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      ref={forwardedRef}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: HeadingSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case '2':
+      return 'text-sm';
+    case undefined:
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return 'text-xl tracking-[-0.16px]';
+    case '6':
+      return 'text-2xl tracking-[-0.288px]';
+    case '7':
+      return 'text-[28px] leading-[34px] tracking-[-0.416px]';
+    case '8':
+      return 'text-[35px] leading-[42px] tracking-[-0.64px]';
+    case '9':
+      return 'text-6xl leading-[73px] tracking-[-0.896px]';
+    case '10':
+      return [
+        'text-[38px] leading-[46px]',
+        'md:text-[70px] md:leading-[85px] tracking-[-1.024px;]',
+      ];
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: HeadingColor | undefined) => {
+  switch (color) {
+    case 'gray':
+      return 'text-slate-11';
+    case 'white':
+    case undefined:
+      return 'text-slate-12';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: HeadingWeight | undefined) => {
+  switch (weight) {
+    case 'medium':
+      return 'font-medium';
+    case 'bold':
+    case undefined:
+      return 'font-bold';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Heading.displayName = 'Heading';

package/.react-email/src/components/icons/icon-arrow-down.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconArrowDown = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
+        fill="currentColor"
+      />
+    </IconBase>
+  ),
+);
+
+IconArrowDown.displayName = 'IconArrowDown';

package/.react-email/src/components/icons/icon-base.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type IconElement = React.ElementRef<'svg'>;
+export type RootProps = React.ComponentPropsWithoutRef<'svg'>;
+
+export interface IconProps extends RootProps {
+  size?: number;
+}
+
+export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ size = 20, ...props }, forwardedRef) => (
+    <svg
+      fill="none"
+      height={size}
+      ref={forwardedRef}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    />
+  ),
+);
+
+IconBase.displayName = 'IconBase';