react-email 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/app/preview/[...slug]/preview.tsx

@@ -6,13 +6,18 @@ import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
 import type { EmailRenderingResult } from '../../../actions/render-email-by-path';
+import { Topbar } from '../../../components';
 import { CodeContainer } from '../../../components/code-container';
 import {
   ResizableWarpper,
   makeIframeDocumentBubbleEvents,
 } from '../../../components/resizable-wrapper';
-import { Shell } from '../../../components/shell';
+import { Send } from '../../../components/send';
+import { Shell, ShellContent } from '../../../components/shell';
+import { Toolbar } from '../../../components/toolbar';
 import { Tooltip } from '../../../components/tooltip';
+import { ActiveViewToggleGroup } from '../../../components/topbar/active-view-toggle-group';
+import { ViewSizeControls } from '../../../components/topbar/view-size-controls';
 import { useClampedState } from '../../../hooks/use-clamped-state';
 import { useEmailRenderingResult } from '../../../hooks/use-email-rendering-result';
 import { useHotreload } from '../../../hooks/use-hot-reload';
@@ -80,7 +85,8 @@ const Preview = ({
     router.push(`${pathname}?${params.toString()}`);
   };
 
-  const hasNoErrors = typeof renderedEmailMetadata !== 'undefined';
+  const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
+  const hasErrors = 'error' in renderingResult;
 
   const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
   const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
@@ -107,30 +113,37 @@ const Preview = ({
   }, 300);
 
   return (
-    <Shell
-      activeView={activeView}
-      currentEmailOpenSlug={slug}
-      markup={renderedEmailMetadata?.markup}
-      pathSeparator={pathSeparator}
-      setActiveView={handleViewChange}
-      setViewHeight={(height) => {
-        setHeight(height);
-        flushSync(() => {
-          handleSaveViewSize();
-        });
-      }}
-      setViewWidth={(width) => {
-        setWidth(width);
-        flushSync(() => {
-          handleSaveViewSize();
-        });
-      }}
-      viewHeight={height}
-      viewWidth={width}
-    >
-      {/* This relative is so that when there is any error the user can still switch between emails */}
-      <div
-        className="relative flex h-full bg-gray-200 pb-8"
+    <Shell currentEmailOpenSlug={slug}>
+      <Topbar pathSeparator={pathSeparator} currentEmailOpenSlug={slug}>
+        <ViewSizeControls
+          setViewHeight={(height) => {
+            setHeight(height);
+            flushSync(() => {
+              handleSaveViewSize();
+            });
+          }}
+          setViewWidth={(width) => {
+            setWidth(width);
+            flushSync(() => {
+              handleSaveViewSize();
+            });
+          }}
+          viewHeight={height}
+          viewWidth={width}
+        />
+        <ActiveViewToggleGroup
+          activeView={activeView}
+          setActiveView={handleViewChange}
+        />
+        {hasRenderingMetadata ? (
+          <div className="flex justify-end">
+            <Send markup={renderedEmailMetadata.markup} />
+          </div>
+        ) : null}
+      </Topbar>
+
+      <ShellContent
+        className="relative flex bg-gray-200"
         ref={(element) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
@@ -149,11 +162,9 @@ const Preview = ({
           };
         }}
       >
-        {'error' in renderingResult ? (
-          <RenderingError error={renderingResult.error} />
-        ) : null}
+        {hasErrors ? <RenderingError error={renderingResult.error} /> : null}
 
-        {hasNoErrors ? (
+        {hasRenderingMetadata ? (
           <>
             {activeView === 'preview' && (
               <ResizableWarpper
@@ -223,7 +234,15 @@ const Preview = ({
         ) : null}
 
         <Toaster />
-      </div>
+      </ShellContent>
+
+      {!hasErrors && hasRenderingMetadata ? (
+        <Toolbar
+          emailSlug={slug}
+          markup={renderedEmailMetadata.markup}
+          plainText={renderedEmailMetadata.plainText}
+        />
+      ) : undefined}
     </Shell>
   );
 };

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

@@ -8,7 +8,7 @@ export interface IconProps extends RootProps {
 }
 
 export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ size = 20, ...props }, forwardedRef) => (
+  ({ size = 20, children, ...props }, forwardedRef) => (
     <svg
       fill="none"
       height={size}
@@ -17,7 +17,9 @@ export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
       width={size}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
-    />
+    >
+      {children}
+    </svg>
   ),
 );
 

package/src/components/icons/icon-bug.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconBug = forwardRef<IconElement, IconProps>((props, ref) => (
+  <IconBase {...props} ref={ref}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="m8 2l1.88 1.88m4.24 0L16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+      <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6m0 0v-9" />
+      <path d="M6.53 9C4.6 8.8 3 7.1 3 5m3 8H2m1 8c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4m-.8 4c2.1.1 3.8 1.9 3.8 4" />
+    </g>
+  </IconBase>
+));

package/src/components/icons/icon-reload.tsx

@@ -0,0 +1,19 @@
+export const IconReload = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.52 6C10.52 3.73168 8.75221 1.48 6.00006 1.48C3.77741 1.48 2.67886 3.1251 2.21074 3.99999H3.60005C3.82096 3.99999 4.00005 4.17908 4.00005 4.39999C4.00005 4.6209 3.82096 4.79999 3.60005 4.79999H1.20005C0.979137 4.79999 0.800049 4.6209 0.800049 4.39999V1.99999C0.800049 1.77908 0.979137 1.59999 1.20005 1.59999C1.42096 1.59999 1.60005 1.77908 1.60005 1.99999V3.45056C2.16367 2.45702 3.4673 0.679993 6.00006 0.679993C9.25029 0.679993 11.32 3.34831 11.32 6C11.32 8.65169 9.25029 11.32 6.00006 11.32C4.44499 11.32 3.15027 10.7047 2.22843 9.76673C1.73486 9.26449 1.34939 8.67121 1.08658 8.03257C1.0025 7.8283 1.09995 7.59453 1.30424 7.51046C1.50853 7.42638 1.7423 7.52384 1.82637 7.72812C2.05104 8.27401 2.38001 8.77961 2.79901 9.20593C3.57646 9.99705 4.66802 10.52 6.00006 10.52C8.75221 10.52 10.52 8.26833 10.52 6Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/icons/icon-scanner.tsx

@@ -0,0 +1,19 @@
+export const IconScanner = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg
+      width="13"
+      height="12"
+      viewBox="0 0 13 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 1.5C1.22386 1.5 1 1.72386 1 2V8C1 8.27614 1.22386 8.5 1.5 8.5H11.5C11.7761 8.5 12 8.27614 12 8V2C12 1.72386 11.7761 1.5 11.5 1.5H1.5ZM0 8C0 8.6531 0.4174 9.2087 1 9.4146V10C1 10.8284 1.67157 11.5 2.5 11.5H10.5C11.3284 11.5 12 10.8284 12 10V9.4146C12.5826 9.2087 13 8.6531 13 8V2C13 1.17157 12.3284 0.5 11.5 0.5H1.5C0.67157 0.5 0 1.17157 0 2V8ZM11 10V9.5H2V10C2 10.2761 2.22386 10.5 2.5 10.5H10.5C10.7761 10.5 11 10.2761 11 10ZM4.5 4.5C4.22386 4.5 4 4.72386 4 5C4 5.27614 4.22386 5.5 4.5 5.5H8.5C8.77614 5.5 9 5.27614 9 5C9 4.72386 8.77614 4.5 8.5 4.5H4.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/icons/icon-scissors.tsx

@@ -0,0 +1,19 @@
+export const IconScissors = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.760039 2.58762C0.760039 3.27246 1.31521 3.82762 2.00004 3.82762C2.68487 3.82762 3.24004 3.27246 3.24004 2.58762C3.24004 1.90278 2.68487 1.34762 2.00004 1.34762C1.31521 1.34762 0.760039 1.90278 0.760039 2.58762ZM2.00004 4.54762C0.917561 4.54762 0.0400391 3.6701 0.0400391 2.58762C0.0400391 1.50514 0.917561 0.627625 2.00004 0.627625C3.08252 0.627625 3.96004 1.50514 3.96004 2.58762C3.96004 2.84649 3.90986 3.09364 3.81868 3.31986L4.58929 3.83529C4.58359 3.85323 4.5782 3.8713 4.57313 3.88949L4.45035 4.32947L4.16809 4.51817L3.37248 3.98691C3.0189 4.33374 2.53445 4.54762 2.00004 4.54762ZM0.760042 7.39998C0.760042 6.71514 1.31521 6.15997 2.00004 6.15997C2.68487 6.15997 3.24004 6.71514 3.24004 7.39998C3.24004 8.08478 2.68487 8.63999 2.00004 8.63999C1.31521 8.63999 0.760042 8.08478 0.760042 7.39998ZM2.00004 5.43997C0.917561 5.43997 0.0400415 6.31749 0.0400415 7.39998C0.0400415 8.48246 0.917561 9.35998 2.00004 9.35998C3.08252 9.35998 3.96004 8.48246 3.96004 7.39998C3.96004 7.14422 3.91106 6.89996 3.82199 6.67598L12 1.20588L11.2389 1.28588C10.1662 1.39862 9.12733 1.72714 8.18485 2.25167L5.72522 3.6205C5.5385 3.72441 5.40112 3.8987 5.34369 4.10451L5.14127 4.82988L3.37954 6.00764C3.02538 5.65671 2.53802 5.43997 2.00004 5.43997ZM5.71553 6.3719L5.72522 6.37739L8.18485 7.74622C9.12733 8.27071 10.1662 8.59927 11.2389 8.71199L12 8.79198L7.04863 5.48022L5.71553 6.3719Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/icons/icon-warning.tsx

@@ -0,0 +1,31 @@
+export const IconWarning = (props: React.ComponentProps<'svg'>) => (
+  <svg
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.8777 8.99999L6.87766 1.99999C6.79044 1.84609 6.66396 1.71808 6.51112 1.62902C6.35828 1.53997 6.18455 1.49304 6.00766 1.49304C5.83077 1.49304 5.65704 1.53997 5.5042 1.62902C5.35136 1.71808 5.22488 1.84609 5.13766 1.99999L1.13766 8.99999C1.0495 9.15267 1.00327 9.32594 1.00366 9.50224C1.00405 9.67855 1.05105 9.85161 1.13988 10.0039C1.22872 10.1562 1.35623 10.2823 1.50951 10.3694C1.66278 10.4565 1.83636 10.5016 2.01266 10.5H10.0127C10.1881 10.4998 10.3604 10.4535 10.5123 10.3656C10.6642 10.2778 10.7903 10.1515 10.8779 9.99955C10.9656 9.84756 11.0117 9.67518 11.0116 9.49973C11.0116 9.32428 10.9654 9.15193 10.8777 8.99999Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.0127 4.5V6.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6.0127 8.5H6.01853"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+IconWarning.displayName = 'IconCircleWarning';

package/src/components/send.tsx

@@ -1,7 +1,6 @@
 import * as Popover from '@radix-ui/react-popover';
 import * as React from 'react';
 import { toast } from 'sonner';
-import { inter } from '../app/inter';
 import { Button } from './button';
 import { Text } from './text';
 
@@ -64,7 +63,7 @@ export const Send = ({ markup }: { markup: string }) => {
       <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 ${inter.variable}`}
+          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)}>

package/src/components/shell.tsx

@@ -4,42 +4,36 @@ import * as React from 'react';
 import { cn } from '../utils';
 import { Logo } from './logo';
 import { Sidebar } from './sidebar';
-import { Topbar } from './topbar';
 
-type RootProps = React.ComponentPropsWithoutRef<'div'>;
-
-interface ShellProps extends RootProps {
-  markup?: string;
+interface ShellProps {
+  children: React.ReactNode;
   currentEmailOpenSlug?: string;
-  pathSeparator?: string;
-
-  activeView?: string;
-  setActiveView?: (view: string) => void;
+}
 
-  viewWidth?: number;
-  setViewWidth?: (width: number) => void;
-  viewHeight?: number;
-  setViewHeight?: (height: number) => void;
+interface ShellContextValue {
+  sidebarToggled: boolean;
+  toggleSidebar: () => void;
 }
 
-export const Shell = ({
-  currentEmailOpenSlug,
-  children,
-  pathSeparator,
-  markup,
-  activeView,
-  setActiveView,
-  viewHeight,
-  viewWidth,
-  setViewHeight,
-  setViewWidth,
-}: ShellProps) => {
-  const [sidebarToggled, setSidebarToggled] = React.useState(false);
-  const [triggerTransition, setTriggerTransition] = React.useState(false);
+export const ShellContext = React.createContext<ShellContextValue | undefined>(
+  undefined,
+);
+
+export const Shell = ({ children, currentEmailOpenSlug }: ShellProps) => {
+  const [sidebarToggled, setSidebarToggled] = React.useState(true);
 
   return (
-    <>
-      <div className="flex h-[4.375rem] items-center justify-between border-slate-6 border-b px-6 lg:hidden">
+    <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>
@@ -68,63 +62,36 @@ export const Shell = ({
           </svg>
         </button>
       </div>
-      <React.Suspense>
-        <Sidebar
-          className={cn({
-            'lg:-translate-x-full translate-x-0': sidebarToggled,
-            '-translate-x-full lg:translate-x-0': !sidebarToggled,
-          })}
-          currentEmailOpenSlug={currentEmailOpenSlug}
-          markup={markup}
-          style={{
-            transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
-          }}
-        />
-      </React.Suspense>
-      <main
-        className={cn(
-          'relative h-full max-h-full min-h-screen w-[100vw] overflow-hidden will-change-width sm:mt-[4.375rem] md:absolute md:right-0 lg:mt-0',
-          {
-            'lg:w-[calc(100dvw)] lg:translate-x-0': sidebarToggled,
-            'lg:w-[calc(100dvw-20rem)] lg:translate-x-0': !sidebarToggled,
-          },
-        )}
-        style={{
-          transition: triggerTransition
-            ? 'width 0.2s ease-in-out, transform 0.2s ease-in-out'
-            : '',
-        }}
-      >
-        <div className="relative h-full w-full">
-          {currentEmailOpenSlug && pathSeparator ? (
-            <Topbar
-              activeView={activeView}
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              markup={markup}
-              onToggleSidebar={() => {
-                setTriggerTransition(true);
+      <div className="flex w-[100dvw] h-[100dvh] flex-row">
+        <React.Suspense>
+          <Sidebar
+            className={cn('shrink [transition:width_0.2s_ease-in-out]', {
+              '-translate-x-full lg:translate-x-0': sidebarToggled,
+              'lg:w-0': !sidebarToggled,
+            })}
+            currentEmailOpenSlug={currentEmailOpenSlug}
+          />
+        </React.Suspense>
+        <main
+          className={cn(
+            'h-full max-h-full min-h-full overflow-hidden will-change-width lg:mt-0',
+            'grow',
+            '[transition:width_0.2s_ease-in-out,_transform_0.2s_ease-in-out]',
+          )}
+        >
+          <div className="relative flex h-full w-full flex-col">{children}</div>
+        </main>
+      </div>
+    </ShellContext.Provider>
+  );
+};
 
-                requestAnimationFrame(() => {
-                  setSidebarToggled((v) => !v);
-                });
+type ShellContentRootProps = React.ComponentProps<'div'>;
 
-                setTimeout(() => {
-                  setTriggerTransition(false);
-                }, 300);
-              }}
-              pathSeparator={pathSeparator}
-              setActiveView={setActiveView}
-              setViewHeight={setViewHeight}
-              setViewWidth={setViewWidth}
-              viewHeight={viewHeight}
-              viewWidth={viewWidth}
-            />
-          ) : null}
-          <div className="relative mx-auto h-[calc(100dvh-3.3125rem)] grow md:h-full">
-            {children}
-          </div>
-        </div>
-      </main>
-    </>
+export const ShellContent = ({ children, ...rest }: ShellContentRootProps) => {
+  return (
+    <div {...rest} className={cn('relative grow', rest.className)}>
+      {children}
+    </div>
   );
 };

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

@@ -76,7 +76,8 @@ export const FileTreeDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center rounded-md pl-3 align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 max-w-full items-center 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':
@@ -96,23 +97,25 @@ export const FileTreeDirectoryChildren = (props: {
                               exit={{ opacity: 0 }}
                               initial={{ opacity: 0 }}
                             >
-                              <motion.div
-                                className="absolute top-1 left-[.625rem] h-6 w-px rounded-sm bg-cyan-11"
-                                layoutId="active-file"
-                                transition={{
-                                  type: 'spring',
-                                  bounce: 0.2,
-                                  duration: 0.6,
-                                }}
-                              />
+                              {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="absolute left-4 h-5 w-5"
+                            className="h-5 w-5"
                             height="20"
                             width="20"
                           />
-                          <span className="truncate pl-8">{emailFilename}</span>
+                          <span className="truncate">{emailFilename}</span>
                         </motion.span>
                       </Link>
                     );

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

@@ -13,7 +13,7 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem] lg:max-w-[14.5rem]">
+    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem]">
       <nav className="flex w-full flex-grow flex-col overflow-y-auto p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>