react-email 3.0.6 → 4.0.0-alpha.0

package/src/components/sidebar/sidebar.tsx

@@ -1,45 +1,319 @@
 'use client';
 
-import * as React from 'react';
-import * as Collapsible from '@radix-ui/react-collapsible';
+import * as Tabs from '@radix-ui/react-tabs';
+import { clsx } from 'clsx';
+import { motion } from 'framer-motion';
+import Lottie from 'lottie-react';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import type * as React from 'react';
+import animatedHelpIcon from '../../animated-icons-data/help.json';
+import animatedLinkIcon from '../../animated-icons-data/link.json';
+import animatedMailIcon from '../../animated-icons-data/mail.json';
 import { useEmails } from '../../contexts/emails';
+import { useIconAnimation } from '../../hooks/use-icon-animation';
 import { cn } from '../../utils';
-import { Logo } from '../logo';
-import { SidebarDirectoryChildren } from './sidebar-directory-children';
+import { Button } from '../button';
+import { Heading } from '../heading';
+import { Tooltip } from '../tooltip';
+import { FileTree } from './file-tree';
+import { LinkChecker } from './link-checker';
+
+type SidebarPanelValue = 'file-tree' | 'link-checker' | 'image-checker';
 
 interface SidebarProps {
   className?: string;
   currentEmailOpenSlug?: string;
+  markup?: string;
   style?: React.CSSProperties;
 }
 
+interface NavigationButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  href?: string;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  tooltip?: string;
+}
+
+interface TabTriggerProps {
+  activeTabValue: SidebarPanelValue;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  tabValue: SidebarPanelValue;
+  tooltipText: string;
+}
+
+interface PanelProps {
+  active: boolean;
+  children: React.ReactNode;
+  title: string;
+}
+
+const TAB_ACTION_BASE_CLASSES =
+  'group relative aspect-square w-full cursor-pointer text-slate-12 transition-colors duration-150 ease-[cubic-bezier(.36,.66,.6,1)] hover:bg-slate-3 disabled:cursor-not-allowed disabled:bg-slate-2 disabled:text-slate-10';
+
+const NavigationButton = ({
+  children,
+  className,
+  href,
+  onMouseEnter,
+  onMouseLeave,
+  side,
+  tooltip,
+}: NavigationButtonProps) => (
+  <Tooltip.Provider>
+    <Tooltip>
+      <Tooltip.Trigger asChild>
+        <Link
+          href={href ?? '#'}
+          className={cn(TAB_ACTION_BASE_CLASSES, className)}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {children}
+        </Link>
+      </Tooltip.Trigger>
+      {tooltip && <Tooltip.Content side={side}>{tooltip}</Tooltip.Content>}
+    </Tooltip>
+  </Tooltip.Provider>
+);
+
+const TabTrigger = ({
+  activeTabValue,
+  children,
+  className,
+  disabled,
+  onMouseEnter,
+  onMouseLeave,
+  tabValue,
+  tooltipText,
+}: TabTriggerProps) => {
+  const isActive = tabValue === activeTabValue;
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <Tabs.Trigger
+            className={clsx(TAB_ACTION_BASE_CLASSES, className, {
+              'bg-slate-6': isActive,
+            })}
+            data-active={isActive}
+            disabled={disabled}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            value={tabValue}
+          >
+            {isActive && (
+              <motion.div
+                className="absolute top-0 left-0 h-full w-1 bg-[#0BB9CD] transition-colors duration-300 ease-[bezier(.36,.66,.6,1)]"
+                layoutId="sidebar-active-tab"
+                transition={{ type: 'spring', bounce: 0.12, duration: 0.6 }}
+              />
+            )}
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0 flex items-center justify-center pl-1 transition-opacity duration-150 ease-in"
+            >
+              {children}
+            </div>
+          </Tabs.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{tooltipText}</Tooltip.Content>
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};
+
+const Panel = ({ title, active, children }: PanelProps) => (
+  <>
+    <div
+      className={clsx(
+        'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+        {
+          'bg-slate-3': active,
+        },
+      )}
+    >
+      <Heading as="h2" className="truncate" size="2" weight="medium">
+        {title}
+      </Heading>
+    </div>
+    <div className="-mt-[.5px] relative h-[calc(100vh-4.375rem)] w-full border-slate-4 border-t px-4 pb-3">
+      {children}
+    </div>
+  </>
+);
+
+const ReactIcon = () => (
+  <svg
+    fill="none"
+    height="32"
+    viewBox="0 0 32 32"
+    width="32"
+    xmlns="http://www.w3.org/2000/svg"
+    className="pointer-events-none duration-300 ease-[cubic-bezier(.42,0,.58,1.8)] group-hover:rotate-90"
+  >
+    <g clipPath="url(#clip0_27_291)">
+      <path
+        clipRule="evenodd"
+        d="M24.4558 24.4853C25.2339 23.7073 25.3805 22.6549 25.2947 21.746C25.2078 20.8254 24.8697 19.8258 24.3896 18.8287C23.957 17.9302 23.3802 16.9745 22.6821 16C23.3802 15.0255 23.957 14.0698 24.3896 13.1713C24.8697 12.1742 25.2078 11.1746 25.2947 10.254C25.3805 9.34508 25.2339 8.29273 24.4558 7.51472C23.6778 6.73671 22.6255 6.59004 21.7165 6.67584C20.796 6.76273 19.7964 7.10086 18.7993 7.58094C17.9007 8.01357 16.945 8.59036 15.9706 9.28842C14.9961 8.59036 14.0404 8.01357 13.1418 7.58094C12.1447 7.10086 11.1451 6.76273 10.2246 6.67584C9.31564 6.59004 8.26329 6.73671 7.48528 7.51472C6.70727 8.29273 6.5606 9.34508 6.6464 10.254C6.7333 11.1746 7.07142 12.1742 7.5515 13.1713C7.98414 14.0698 8.56092 15.0255 9.25898 16C8.56092 16.9745 7.98414 17.9302 7.5515 18.8287C7.07142 19.8258 6.7333 20.8254 6.6464 21.746C6.5606 22.6549 6.70727 23.7073 7.48528 24.4853C8.26329 25.2633 9.31564 25.41 10.2246 25.3242C11.1451 25.2373 12.1447 24.8991 13.1418 24.4191C14.0404 23.9864 14.9961 23.4096 15.9706 22.7116C16.945 23.4096 17.9007 23.9864 18.7993 24.4191C19.7964 24.8991 20.796 25.2373 21.7165 25.3242C22.6255 25.41 23.6778 25.2633 24.4558 24.4853ZM15.9706 20.948C16.8399 20.2684 17.724 19.4874 18.591 18.6205C19.458 17.7535 20.239 16.8693 20.9186 16C20.239 15.1307 19.458 14.2465 18.591 13.3795C17.724 12.5126 16.8399 11.7316 15.9706 11.052C15.1012 11.7316 14.2171 12.5126 13.3501 13.3795C12.4831 14.2465 11.7021 15.1307 11.0225 16C11.7021 16.8693 12.4831 17.7535 13.3501 18.6205C14.2171 19.4874 15.1012 20.2684 15.9706 20.948ZM17.1498 21.8145C17.968 21.1558 18.7885 20.4195 19.5893 19.6187C20.39 18.818 21.1264 17.9974 21.7851 17.1792C23.7187 19.9919 24.4627 22.4819 23.4576 23.487C22.4524 24.4922 19.9625 23.7482 17.1498 21.8145ZM10.156 17.1792C10.8148 17.9974 11.5511 18.818 12.3518 19.6187C13.1526 20.4195 13.9731 21.1558 14.7914 21.8145C11.9786 23.7482 9.48871 24.4922 8.48355 23.487C7.47839 22.4819 8.22238 19.9919 10.156 17.1792ZM10.156 14.8208C10.8148 14.0026 11.5511 13.182 12.3518 12.3813C13.1526 11.5805 13.9731 10.8442 14.7914 10.1855C11.9786 8.25182 9.48871 7.50783 8.48355 8.51299C7.47839 9.51815 8.22238 12.0081 10.156 14.8208ZM17.1498 10.1855C17.968 10.8442 18.7885 11.5805 19.5893 12.3813C20.39 13.182 21.1264 14.0026 21.7851 14.8208C23.7187 12.0081 24.4627 9.51815 23.4576 8.51299C22.4524 7.50783 19.9625 8.25182 17.1498 10.1855Z"
+        fill="white"
+        fillRule="evenodd"
+        stroke="white"
+        strokeWidth="0.5"
+      />
+    </g>
+  </svg>
+);
+
 export const Sidebar = ({
   className,
   currentEmailOpenSlug,
+  markup: emailMarkup,
   style,
 }: SidebarProps) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const activePanelValue = (searchParams.get('sidebar-panel') ??
+    'file-tree') as SidebarPanelValue;
   const { emailsDirectoryMetadata } = useEmails();
 
+  const mailAnimation = useIconAnimation();
+  const linkAnimation = useIconAnimation();
+  const helpAnimation = useIconAnimation();
+
+  const setActivePanelValue = (newValue: SidebarPanelValue) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('sidebar-panel', newValue);
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
   return (
-    <aside
-      className={cn('border-r flex flex-col border-slate-6', className)}
-      style={{ ...style }}
+    <Tabs.Root
+      asChild
+      onValueChange={(v) => setActivePanelValue(v as SidebarPanelValue)}
+      orientation="vertical"
+      value={activePanelValue}
     >
-      <div className="p-4 h-[70px] flex-shrink items-center hidden lg:flex">
-        <Logo />
-      </div>
-      <nav className="p-4 flex-grow lg:pt-0 pl-0 w-screen h-[calc(100vh_-_70px)] lg:w-full lg:min-w-[275px] lg:max-w-[275px] flex flex-col overflow-y-auto">
-        <Collapsible.Root>
-          <React.Suspense>
-            <SidebarDirectoryChildren
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              emailsDirectoryMetadata={emailsDirectoryMetadata}
-              isRoot
-              open
+      <aside
+        className={cn(
+          'fixed top-[4.375rem] left-0 z-[9999] grid h-full max-h-[calc(100dvh-4.375rem)] w-screen max-w-full grid-cols-[3.375rem,1fr] overflow-hidden bg-black will-change-auto lg:top-0 lg:z-auto lg:max-h-screen lg:max-w-[20rem]',
+          className,
+        )}
+        style={style}
+      >
+        <Tabs.List className="flex h-full flex-col border-slate-6 border-r">
+          <TabTrigger
+            activeTabValue={activePanelValue}
+            onMouseEnter={mailAnimation.onMouseEnter}
+            onMouseLeave={mailAnimation.onMouseLeave}
+            tabValue="file-tree"
+            tooltipText="File Explorer"
+          >
+            <Lottie
+              animationData={animatedMailIcon as object}
+              autoPlay={false}
+              className="h-5 w-5"
+              loop={false}
+              lottieRef={mailAnimation.ref}
+            />
+          </TabTrigger>
+          <TabTrigger
+            activeTabValue={activePanelValue}
+            className="relative"
+            onMouseEnter={linkAnimation.onMouseEnter}
+            onMouseLeave={linkAnimation.onMouseLeave}
+            tabValue="link-checker"
+            tooltipText="Link Checker"
+          >
+            <Lottie
+              animationData={animatedLinkIcon as object}
+              autoPlay={false}
+              className="h-6 w-6"
+              loop={false}
+              lottieRef={linkAnimation.ref}
             />
-          </React.Suspense>
-        </Collapsible.Root>
-      </nav>
-    </aside>
+          </TabTrigger>
+          <div className="mt-auto flex flex-col">
+            <NavigationButton
+              className="flex items-center justify-center"
+              href="https://react.email/docs"
+              onMouseEnter={helpAnimation.onMouseEnter}
+              onMouseLeave={helpAnimation.onMouseLeave}
+              side="right"
+              tooltip="Documentation"
+            >
+              <Lottie
+                animationData={animatedHelpIcon as object}
+                autoPlay={false}
+                className="h-5 w-5"
+                loop={false}
+                lottieRef={helpAnimation.ref}
+              />
+            </NavigationButton>
+            <NavigationButton
+              className="flex items-center justify-center"
+              href="https://react.email"
+              side="right"
+              tooltip="Website"
+            >
+              <div className="flex h-7 w-7 items-center justify-center">
+                <ReactIcon />
+              </div>
+            </NavigationButton>
+          </div>
+        </Tabs.List>
+        <div className="flex overflow-y-auto overflow-x-hidden">
+          <div className="flex w-full flex-col border-slate-6 border-r">
+            {activePanelValue === 'link-checker' && (
+              <Panel
+                title="Link Checker"
+                active={activePanelValue === 'link-checker'}
+              >
+                {currentEmailOpenSlug && emailMarkup ? (
+                  <LinkChecker
+                    emailMarkup={emailMarkup}
+                    emailSlug={currentEmailOpenSlug}
+                  />
+                ) : (
+                  <div className="mt-4 flex w-full flex-col gap-2 text-pretty text-xs leading-relaxed">
+                    <div className="flex flex-col gap-1 rounded-lg border border-[#0BB9CD]/50 bg-[#0BB9CD]/20 text-white">
+                      <span className="mx-2.5 mt-2">
+                        To use the Link Checker, you need to select a template.
+                      </span>
+                      <Button
+                        className="mx-2 my-2.5 transition-all disabled:border-transparent disabled:bg-slate-11"
+                        onClick={() => setActivePanelValue('file-tree')}
+                      >
+                        Select a template
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </Panel>
+            )}
+            {activePanelValue === 'file-tree' && (
+              <Panel
+                title="File Explorer"
+                active={activePanelValue === 'file-tree'}
+              >
+                <FileTree
+                  currentEmailOpenSlug={currentEmailOpenSlug}
+                  emailsDirectoryMetadata={emailsDirectoryMetadata}
+                />
+              </Panel>
+            )}
+          </div>
+        </div>
+      </aside>
+    </Tabs.Root>
   );
 };

package/src/components/text.tsx

@@ -1,6 +1,6 @@
 import * as SlotPrimitive from '@radix-ui/react-slot';
 import * as React from 'react';
-import { type As, unreachable, cn } from '../utils';
+import { type As, cn, unreachable } from '../utils';
 
 export type TextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 export type TextColor = 'gray' | 'white';

package/src/components/tooltip-content.tsx

@@ -1,9 +1,9 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-import { cn } from '../utils';
 import { inter } from '../app/inter';
+import { cn } from '../utils';
 
-type ContentElement = React.ElementRef<typeof TooltipPrimitive.Content>;
+type ContentElement = React.ComponentRef<typeof TooltipPrimitive.Content>;
 type ContentProps = React.ComponentPropsWithoutRef<
   typeof TooltipPrimitive.Content
 >;
@@ -18,7 +18,7 @@ export const TooltipContent = React.forwardRef<
     <TooltipPrimitive.Content
       {...props}
       className={cn(
-        'bg-black text-white border border-slate-6 z-20 px-3 py-2 rounded-md text-xs',
+        'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
         `${inter.variable} font-sans`,
       )}
       ref={forwardedRef}

package/src/components/tooltip.tsx

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
+import type * as React from 'react';
 import { TooltipContent } from './tooltip-content';
 
 type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;

package/src/components/topbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { motion } from 'framer-motion';
-import * as React from 'react';
+import type * as React from 'react';
 import { cn } from '../utils';
 import { tabTransition } from '../utils/constants';
 import { Heading } from './heading';
@@ -21,21 +21,21 @@ interface TopbarProps {
   setActiveView?: (view: string) => void;
 }
 
-export const Topbar: React.FC<Readonly<TopbarProps>> = ({
+export const Topbar = ({
   currentEmailOpenSlug,
   pathSeparator,
   markup,
   activeView,
   setActiveView,
   onToggleSidebar,
-}) => {
+}: TopbarProps) => {
   return (
     <Tooltip.Provider>
-      <header className="flex relative items-center px-4 justify-between h-[70px] border-b border-slate-6">
+      <header className="relative flex h-[3.3125rem] items-center justify-between border-slate-6 border-b px-3">
         <Tooltip>
           <Tooltip.Trigger asChild>
             <button
-              className="hidden lg:flex rounded-lg px-2 py-2 transition ease-in-out duration-200 relative hover:bg-slate-5 text-slate-11 hover:text-slate-12"
+              className="relative hidden rounded-lg px-2 py-2 text-slate-11 transition duration-200 ease-in-out hover:bg-slate-5 hover:text-slate-12 lg:flex"
               onClick={() => {
                 if (onToggleSidebar) {
                   onToggleSidebar();
@@ -48,17 +48,15 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
           </Tooltip.Trigger>
           <Tooltip.Content>Show/hide sidebar</Tooltip.Content>
         </Tooltip>
-
-        <div className="items-center overflow-hidden hidden lg:flex text-center absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
+        <div className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 hidden transform items-center overflow-hidden text-center lg:flex">
           <Heading as="h2" className="truncate" size="2" weight="medium">
             {currentEmailOpenSlug.split(pathSeparator).pop()}
           </Heading>
         </div>
-
-        <div className="flex gap-3 justify-between lg:justify-start w-full lg:w-fit">
+        <div className="flex w-full justify-between gap-3 lg:w-fit lg:justify-start">
           <ToggleGroup.Root
             aria-label="View mode"
-            className="inline-block items-center bg-slate-2 border border-slate-6 rounded-md overflow-hidden h-[36px]"
+            className="inline-block h-[36px] items-center overflow-hidden rounded-md border border-slate-6 bg-slate-2"
             onValueChange={(value) => {
               if (value) setActiveView?.(value);
             }}
@@ -70,7 +68,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                 <Tooltip.Trigger asChild>
                   <div
                     className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
                       {
                         'text-slate-11': activeView !== 'desktop',
                         'text-slate-12': activeView === 'desktop',
@@ -80,7 +78,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                     {activeView === 'desktop' && (
                       <motion.span
                         animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                        className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
                         exit={{ opacity: 0 }}
                         initial={{ opacity: 0 }}
                         layoutId="topbar-tabs"
@@ -98,7 +96,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                 <Tooltip.Trigger asChild>
                   <div
                     className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
                       {
                         'text-slate-11': activeView !== 'mobile',
                         'text-slate-12': activeView === 'mobile',
@@ -108,7 +106,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                     {activeView === 'mobile' && (
                       <motion.span
                         animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                        className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
                         exit={{ opacity: 0 }}
                         initial={{ opacity: 0 }}
                         layoutId="topbar-tabs"
@@ -126,7 +124,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                 <Tooltip.Trigger asChild>
                   <div
                     className={cn(
-                      'px-3 py-2 transition ease-in-out duration-200 relative hover:text-slate-12',
+                      'relative px-3 py-2 transition duration-200 ease-in-out hover:text-slate-12',
                       {
                         'text-slate-11': activeView !== 'source',
                         'text-slate-12': activeView === 'source',
@@ -136,7 +134,7 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
                     {activeView === 'source' && (
                       <motion.span
                         animate={{ opacity: 1 }}
-                        className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                        className="absolute top-0 right-0 bottom-0 left-0 bg-slate-4"
                         exit={{ opacity: 0 }}
                         initial={{ opacity: 0 }}
                         layoutId="topbar-tabs"
@@ -150,7 +148,6 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
               </Tooltip>
             </ToggleGroup.Item>
           </ToggleGroup.Root>
-
           {markup ? (
             <div className="flex justify-end">
               <Send markup={markup} />

package/src/hooks/use-email-rendering-result.ts

@@ -1,9 +1,9 @@
 import { useState } from 'react';
+import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 import {
-  renderEmailByPath,
   type EmailRenderingResult,
+  renderEmailByPath,
 } from '../actions/render-email-by-path';
-import { getEmailPathFromSlug } from '../actions/get-email-path-from-slug';
 import { useHotreload } from './use-hot-reload';
 
 export const useEmailRenderingResult = (

package/src/hooks/use-icon-animation.ts

@@ -0,0 +1,44 @@
+import type { LottieRefCurrentProps } from 'lottie-react';
+import * as React from 'react';
+
+const TIMEOUT = 150;
+const THRESHOLD_ANIMATION = 0.9;
+
+export const useIconAnimation = () => {
+  const ref = React.useRef<LottieRefCurrentProps>(null);
+  const timer = React.useRef<NodeJS.Timeout | null>(null);
+
+  const onMouseLeave = React.useCallback(() => {
+    timer.current && clearTimeout(timer.current);
+  }, []);
+
+  const onMouseEnter = React.useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const total = Math.round(ref.current.animationItem?.totalFrames ?? 0);
+    const current = Math.round(
+      (ref.current.animationItem?.currentFrame ?? 0) + 1,
+    );
+
+    if (current === 1 || current >= total * THRESHOLD_ANIMATION) {
+      timer.current = setTimeout(() => {
+        if (!ref.current) {
+          return;
+        }
+
+        ref.current.stop();
+        ref.current.setDirection(1);
+        ref.current.setSpeed(1);
+        ref.current.play();
+      }, TIMEOUT);
+    }
+  }, []);
+
+  return {
+    ref,
+    onMouseLeave,
+    onMouseEnter,
+  };
+};

package/src/utils/cn.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const cn = (...inputs: ClassValue[]) => {

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -1,5 +1,5 @@
-import path from 'node:path';
 import { promises as fs } from 'node:fs';
+import path from 'node:path';
 import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
 import { escapeStringForRegex } from './escape-string-for-regex';
 

package/src/utils/get-email-component.ts

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import path from 'node:path';
 import vm from 'node:vm';
-import type React from 'react';
-import { type RawSourceMap } from 'source-map-js';
-import { type OutputFile, build, type BuildFailure } from 'esbuild';
 import type { render } from '@react-email/render';
-import type { EmailTemplate as EmailComponent } from './types/email-template';
-import type { ErrorObject } from './types/error-object';
+import { type BuildFailure, type OutputFile, build } from 'esbuild';
+import type React from 'react';
+import type { RawSourceMap } from 'source-map-js';
+import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
 import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
 import { staticNodeModulesForVM } from './static-node-modules-for-vm';
-import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
+import type { EmailTemplate as EmailComponent } from './types/email-template';
+import type { ErrorObject } from './types/error-object';
 
 export const getEmailComponent = async (
   emailPath: string,

package/src/utils/get-emails-directory-metadata.spec.ts

@@ -18,7 +18,6 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
         relativePath: 'magic-links',
         emailFilenames: [
           'aws-verify-email',
-          'jobaccepted-magic-link',
           'linear-login-code',
           'notion-magic-link',
           'plaid-verify-identity',

package/src/utils/improve-error-with-sourcemap.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
+import { type RawSourceMap, SourceMapConsumer } from 'source-map-js';
 import * as stackTraceParser from 'stacktrace-parser';
-import { SourceMapConsumer, type RawSourceMap } from 'source-map-js';
 import type { ErrorObject } from './types/error-object';
 
 export const improveErrorWithSourceMap = (

package/src/utils/static-node-modules-for-vm.ts

@@ -48,15 +48,15 @@ import zlib from 'node:zlib';
  */
 export const staticNodeModulesForVM = {
   assert,
-  'async_hooks': asyncHooks,
+  async_hooks: asyncHooks,
   buffer,
-  'child_process': childProcess,
+  child_process: childProcess,
   cluster,
   console,
   constants,
   crypto,
   dgram,
-  'diagnostics_channel': diagnosticsChannel,
+  diagnostics_channel: diagnosticsChannel,
   dns,
   domain,
   events,
@@ -70,14 +70,14 @@ export const staticNodeModulesForVM = {
   net,
   os,
   path,
-  'perf_hooks': perfHooks,
+  perf_hooks: perfHooks,
   process,
   punycode,
   querystring,
   readline,
   repl,
   stream,
-  'string_decoder': stringDecoder,
+  string_decoder: stringDecoder,
   timers,
   'timers/promises': timersPromises,
   tls,
@@ -87,6 +87,6 @@ export const staticNodeModulesForVM = {
   'util/types': utilTypes,
   v8,
   vm,
-  'worker_threads': workerThreads,
+  worker_threads: workerThreads,
   zlib,
 };