@react-email/preview-server 1.0.0-canary.0

package/src/components/send.tsx

@@ -0,0 +1,134 @@
+import * as Popover from '@radix-ui/react-popover';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { Button } from './button';
+import { Text } from './text';
+
+export const Send = ({ markup }: { markup: string }) => {
+  const [to, setTo] = React.useState('');
+  const [subject, setSubject] = React.useState('Testing React Email');
+  const [isSending, setIsSending] = React.useState(false);
+  const [isPopOverOpen, setIsPopOverOpen] = React.useState(false);
+
+  const onFormSubmit = async (e: React.FormEvent) => {
+    try {
+      e.preventDefault();
+      setIsSending(true);
+
+      const response = await fetch('https://react.email/api/send/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          to,
+          subject,
+          html: markup,
+        }),
+      });
+
+      if (response.status === 429) {
+        const { error } = (await response.json()) as { error: string };
+        toast.error(error);
+      }
+
+      toast.success('Email sent! Check your inbox.');
+    } catch (exception) {
+      toast.error('Something went wrong. Please try again.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <Popover.Root
+      onOpenChange={() => {
+        if (!isPopOverOpen) {
+          document.body.classList.add('popup-open');
+          setIsPopOverOpen(true);
+        } else {
+          document.body.classList.remove('popup-open');
+          setIsPopOverOpen(false);
+        }
+      }}
+      open={isPopOverOpen}
+    >
+      <Popover.Trigger asChild>
+        <button
+          className="box-border flex h-5 w-20 items-center justify-center self-center rounded-lg border border-slate-6 bg-slate-2 px-4 py-4 text-center font-sans text-sm text-slate-11 outline-none transition duration-300 ease-in-out hover:border-slate-10 hover:text-slate-12"
+          type="submit"
+        >
+          Send
+        </button>
+      </Popover.Trigger>
+      <Popover.Anchor />
+      <Popover.Portal>
+        <Popover.Content
+          align="end"
+          className="-mt-10 w-80 rounded-lg border border-slate-6 bg-black/70 p-3 font-sans text-slate-11 shadow-md backdrop-blur-lg font-sans"
+          sideOffset={48}
+        >
+          <form className="mt-1" onSubmit={(e) => void onFormSubmit(e)}>
+            <label
+              className="mb-2 block text-xs uppercase text-slate-10"
+              htmlFor="to"
+            >
+              Recipient
+            </label>
+            <input
+              autoFocus
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              defaultValue={to}
+              id="to"
+              onChange={(e) => {
+                setTo(e.target.value);
+              }}
+              placeholder="you@example.com"
+              required
+              type="email"
+            />
+            <label
+              className="mb-2 mt-1 block text-xs uppercase text-slate-10"
+              htmlFor="subject"
+            >
+              Subject
+            </label>
+            <input
+              className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
+              defaultValue={subject}
+              id="subject"
+              onChange={(e) => {
+                setSubject(e.target.value);
+              }}
+              placeholder="My Email"
+              required
+              type="text"
+            />
+            <input
+              className="appearance-none checked:bg-blue-500"
+              type="checkbox"
+            />
+            <div className="mt-3 flex items-center justify-between">
+              <Text className="inline-block" size="1">
+                Powered by{' '}
+                <a
+                  className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
+                  href="https://resend.com"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Resend
+                </a>
+              </Text>
+              <Button
+                className="disabled:border-transparent disabled:bg-slate-11"
+                disabled={subject.length === 0 || to.length === 0 || isSending}
+                type="submit"
+              >
+                Send
+              </Button>
+            </div>
+          </form>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};

package/src/components/shell.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+import { Logo } from './logo';
+import { Sidebar } from './sidebar';
+
+interface ShellProps {
+  children: React.ReactNode;
+  currentEmailOpenSlug?: string;
+}
+
+interface ShellContextValue {
+  sidebarToggled: boolean;
+  toggleSidebar: () => void;
+}
+
+export const ShellContext = React.createContext<ShellContextValue | undefined>(
+  undefined,
+);
+
+export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
+  const [sidebarToggled, setSidebarToggled] = React.useState(true);
+
+  return (
+    <ShellContext.Provider
+      value={{
+        toggleSidebar: () => setSidebarToggled((v) => !v),
+        sidebarToggled,
+      }}
+    >
+      <div
+        className={
+          'flex h-[4.375rem] items-center justify-between border-slate-6 border-b px-6 lg:hidden'
+        }
+      >
+        <div className="flex h-[4.375rem] items-center">
+          <Logo />
+        </div>
+        <button
+          className="flex h-6 w-6 items-center justify-center rounded text-white"
+          onClick={() => {
+            setSidebarToggled((v) => !v);
+          }}
+          type="button"
+        >
+          <svg
+            fill="none"
+            height="16"
+            stroke="white"
+            viewBox="0 0 15 15"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Menu</title>
+            <path
+              clipRule="evenodd"
+              d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div className="w-[100dvw] flex h-[calc(100dvh-4.375rem)] lg:h-[100dvh]">
+        <React.Suspense>
+          <Sidebar
+            className={cn(
+              'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-full max-w-full will-change-auto [transition:width_0.2s_ease-in-out]',
+              'lg:static lg:inline-block lg:z-auto lg:max-h-full lg:w-[16rem]',
+              {
+                '-translate-x-full lg:translate-x-0': sidebarToggled,
+                'lg:w-0': !sidebarToggled,
+              },
+            )}
+            currentEmailOpenSlug={currentEmailOpenSlug}
+          />
+        </React.Suspense>
+        <main
+          className={cn(
+            'inline-block relative overflow-hidden will-change-[width]',
+            'w-full h-full',
+            '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
+            sidebarToggled && 'lg:w-[calc(100%-16rem)]',
+          )}
+        >
+          {children}
+        </main>
+      </div>
+    </ShellContext.Provider>
+  );
+};

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -0,0 +1,139 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { cn } from '../../utils';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
+import { IconFile } from '../icons/icon-file';
+import { FileTreeDirectory } from './file-tree-directory';
+
+export const FileTreeDirectoryChildren = (props: {
+  emailsDirectoryMetadata: EmailsDirectory;
+  currentEmailOpenSlug?: string;
+  open: boolean;
+  isRoot?: boolean;
+}) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  return (
+    <AnimatePresence initial={false}>
+      {props.open ? (
+        <Collapsible.Content
+          asChild
+          className="relative overflow-y-hidden pl-1"
+          forceMount
+        >
+          <motion.div
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            initial={{ opacity: 0, height: 0 }}
+          >
+            {props.isRoot ? null : (
+              <div className="line absolute left-2.5 h-full w-px bg-slate-6" />
+            )}
+            <div className="flex flex-col truncate">
+              <LayoutGroup id="sidebar">
+                {props.emailsDirectoryMetadata.subDirectories.map(
+                  (subDirectory) => (
+                    <FileTreeDirectory
+                      className="p-0 data-[state=open]:mb-2"
+                      currentEmailOpenSlug={props.currentEmailOpenSlug}
+                      emailsDirectoryMetadata={subDirectory}
+                      key={subDirectory.absolutePath}
+                    />
+                  ),
+                )}
+                {props.emailsDirectoryMetadata.emailFilenames.map(
+                  (emailFilename, index) => {
+                    const emailSlug = props.isRoot
+                      ? emailFilename
+                      : `${props.emailsDirectoryMetadata.relativePath}/${emailFilename}`;
+
+                    const removeExtensionFrom = (path: string) => {
+                      if (
+                        path.split('.').pop() === 'tsx' ||
+                        path.split('.').pop() === 'jsx' ||
+                        path.split('.').pop() === 'js'
+                      ) {
+                        return path.split('.').slice(0, -1).join('.');
+                      }
+
+                      return path;
+                    };
+                    const isCurrentPage = props.currentEmailOpenSlug
+                      ? removeExtensionFrom(props.currentEmailOpenSlug) ===
+                        emailSlug
+                      : false;
+
+                    return (
+                      <Link
+                        href={{
+                          pathname: `/preview/${emailSlug}`,
+                          search: searchParams.toString(),
+                        }}
+                        onMouseOver={() => {
+                          router.prefetch(
+                            `/preview/${emailSlug}?${searchParams.toString()}`,
+                          );
+                        }}
+                        key={emailSlug}
+                      >
+                        <motion.span
+                          animate={{ x: 0, opacity: 1 }}
+                          className={cn(
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            props.isRoot ? undefined : 'pl-3',
+                            {
+                              'text-cyan-11': isCurrentPage,
+                              'hover:text-slate-12':
+                                props.currentEmailOpenSlug !== emailSlug,
+                            },
+                          )}
+                          initial={{ x: -10 + -index * 1.5, opacity: 0 }}
+                          transition={{
+                            x: { delay: 0.03 * index, duration: 0.2 },
+                            opacity: { delay: 0.03 * index, duration: 0.2 },
+                          }}
+                        >
+                          {isCurrentPage ? (
+                            <motion.span
+                              animate={{ opacity: 1 }}
+                              className="absolute inset-0 rounded-md bg-cyan-5 opacity-0 transition-all duration-200 ease-[cubic-bezier(.6,.12,.34,.96)]"
+                              exit={{ opacity: 0 }}
+                              initial={{ opacity: 0 }}
+                            >
+                              {props.isRoot ? null : (
+                                <motion.div
+                                  className="absolute top-1 left-[0.4rem] inset-0 h-6 w-px rounded-sm bg-cyan-11"
+                                  layoutId="active-file"
+                                  transition={{
+                                    type: 'spring',
+                                    bounce: 0.2,
+                                    duration: 0.6,
+                                  }}
+                                />
+                              )}
+                            </motion.span>
+                          ) : null}
+                          <IconFile
+                            className="h-5 w-5"
+                            height="20"
+                            width="20"
+                          />
+                          <span className="truncate w-[calc(100%-1.25rem)]">
+                            {emailFilename}
+                          </span>
+                        </motion.span>
+                      </Link>
+                    );
+                  },
+                )}
+              </LayoutGroup>
+            </div>
+          </motion.div>
+        </Collapsible.Content>
+      ) : null}
+    </AnimatePresence>
+  );
+};

package/src/components/sidebar/file-tree-directory.tsx

@@ -0,0 +1,92 @@
+'use client';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
+import { cn } from '../../utils';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
+import { Heading } from '../heading';
+import { IconArrowDown } from '../icons/icon-arrow-down';
+import { IconFolder } from '../icons/icon-folder';
+import { IconFolderOpen } from '../icons/icon-folder-open';
+import { FileTreeDirectoryChildren } from './file-tree-directory-children';
+
+interface SidebarDirectoryProps {
+  emailsDirectoryMetadata: EmailsDirectory;
+  className?: string;
+  currentEmailOpenSlug?: string;
+}
+
+const persistedOpenDirectories = new Set<string>();
+
+export const FileTreeDirectory = ({
+  emailsDirectoryMetadata: directoryMetadata,
+  className,
+  currentEmailOpenSlug,
+}: SidebarDirectoryProps) => {
+  const doesDirectoryContainCurrentEmailOpen = currentEmailOpenSlug
+    ? currentEmailOpenSlug.includes(directoryMetadata.relativePath)
+    : false;
+
+  const isEmpty =
+    directoryMetadata.emailFilenames.length === 0 &&
+    directoryMetadata.subDirectories.length === 0;
+
+  const [open, setOpen] = React.useState(
+    persistedOpenDirectories.has(directoryMetadata.absolutePath) ||
+      doesDirectoryContainCurrentEmailOpen,
+  );
+
+  return (
+    <Collapsible.Root
+      className={cn('group', className)}
+      onOpenChange={(isOpening) => {
+        if (isOpening) {
+          persistedOpenDirectories.add(directoryMetadata.absolutePath);
+        } else {
+          persistedOpenDirectories.delete(directoryMetadata.absolutePath);
+        }
+
+        setOpen(isOpening);
+      }}
+      open={open}
+    >
+      <Collapsible.Trigger
+        className={cn(
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
+          {
+            'cursor-pointer': !isEmpty,
+          },
+        )}
+      >
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Heading
+          as="h3"
+          className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+          color="gray"
+          size="2"
+          weight="medium"
+        >
+          {directoryMetadata.directoryName}
+        </Heading>
+        {!isEmpty ? (
+          <IconArrowDown
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
+            data-open={open}
+          />
+        ) : null}
+      </Collapsible.Trigger>
+      {!isEmpty ? (
+        <FileTreeDirectoryChildren
+          currentEmailOpenSlug={currentEmailOpenSlug}
+          emailsDirectoryMetadata={directoryMetadata}
+          open={open}
+        />
+      ) : null}
+    </Collapsible.Root>
+  );
+};

package/src/components/sidebar/file-tree.tsx

@@ -0,0 +1,31 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import * as React from 'react';
+import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
+import { FileTreeDirectoryChildren } from './file-tree-directory-children';
+
+interface FileTreeProps {
+  currentEmailOpenSlug: string | undefined;
+  emailsDirectoryMetadata: EmailsDirectory;
+}
+
+export const FileTree = ({
+  currentEmailOpenSlug,
+  emailsDirectoryMetadata,
+}: FileTreeProps) => {
+  return (
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
+      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
+        <Collapsible.Root open>
+          <React.Suspense>
+            <FileTreeDirectoryChildren
+              currentEmailOpenSlug={currentEmailOpenSlug}
+              emailsDirectoryMetadata={emailsDirectoryMetadata}
+              isRoot
+              open
+            />
+          </React.Suspense>
+        </Collapsible.Root>
+      </nav>
+    </div>
+  );
+};

package/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export * from './sidebar';

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { clsx } from 'clsx';
+import { useEmails } from '../../contexts/emails';
+import { cn } from '../../utils';
+import { Logo } from '../logo';
+import { FileTree } from './file-tree';
+
+interface SidebarProps {
+  className?: string;
+  currentEmailOpenSlug?: string;
+}
+
+export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
+  const { emailsDirectoryMetadata } = useEmails();
+
+  return (
+    <aside
+      className={cn(
+        'overflow-hidden',
+        'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
+        className,
+      )}
+    >
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden border-slate-4 border-t px-4 pb-3">
+          <FileTree
+            currentEmailOpenSlug={currentEmailOpenSlug}
+            emailsDirectoryMetadata={emailsDirectoryMetadata}
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};

package/src/components/text.tsx

@@ -0,0 +1,99 @@
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type As, cn, unreachable } from '../utils';
+
+export type TextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+export type TextColor = 'gray' | 'white';
+export type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
+export type TextWeight = 'normal' | 'medium';
+
+interface TextOwnProps {
+  size?: TextSize;
+  color?: TextColor;
+  transform?: TextTransform;
+  weight?: TextWeight;
+}
+
+type TextProps = As<'span', 'div', 'p'> & TextOwnProps;
+
+export const Text = React.forwardRef<HTMLSpanElement, Readonly<TextProps>>(
+  (
+    {
+      as: Tag = 'span',
+      size = '2',
+      color = 'gray',
+      transform,
+      weight = 'normal',
+      className,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => (
+    <SlotPrimitive.Slot
+      className={cn(
+        className,
+        transform,
+        getSizesClassNames(size),
+        getColorClassNames(color),
+        getWeightClassNames(weight),
+      )}
+      ref={forwardedRef}
+      {...props}
+    >
+      <Tag>{children}</Tag>
+    </SlotPrimitive.Slot>
+  ),
+);
+
+const getSizesClassNames = (size: TextSize | undefined) => {
+  switch (size) {
+    case '1':
+      return 'text-xs';
+    case undefined:
+    case '2':
+      return 'text-sm';
+    case '3':
+      return 'text-base';
+    case '4':
+      return 'text-lg';
+    case '5':
+      return ['text-17px', 'md: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]';
+    default:
+      return unreachable(size);
+  }
+};
+
+const getColorClassNames = (color: TextColor | undefined) => {
+  switch (color) {
+    case 'white':
+      return 'text-slate-12';
+    case undefined:
+    case 'gray':
+      return 'text-slate-11';
+    default:
+      return unreachable(color);
+  }
+};
+
+const getWeightClassNames = (weight: TextWeight | undefined) => {
+  switch (weight) {
+    case undefined:
+    case 'normal':
+      return 'font-normal';
+    case 'medium':
+      return 'font-medium';
+    default:
+      return unreachable(weight);
+  }
+};
+
+Text.displayName = 'Text';