react-email 3.0.7 → 4.0.0-alpha.1

package/src/components/shell.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import * as React from 'react';
 import { cn } from '../utils';
 import { Logo } from './logo';
@@ -27,14 +28,13 @@ export const Shell = ({
   const [triggerTransition, setTriggerTransition] = React.useState(false);
 
   return (
-    <div className="flex bg-black text-white flex-col h-screen overflow-x-hidden">
-      <div className="flex lg:hidden items-center px-6 justify-between h-[70px] border-b border-slate-6">
-        <div className="h-[70px] flex items-center">
+    <>
+      <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="h-6 w-6 rounded flex items-center justify-center text-white"
+          className="flex h-6 w-6 items-center justify-center rounded text-white"
           onClick={() => {
             setSidebarToggled((v) => !v);
           }}
@@ -48,6 +48,7 @@ export const Shell = ({
             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"
@@ -57,36 +58,34 @@ export const Shell = ({
           </svg>
         </button>
       </div>
-
-      <div className="flex bg-slate-2">
+      <React.Suspense>
         <Sidebar
-          className={cn(
-            'w-screen max-w-full bg-black h-screen lg:h-auto z-50 lg:z-auto lg:max-w-[275px] fixed top-[70px] lg:top-0 left-0',
-            {
-              'translate-x-0 lg:-translate-x-full': sidebarToggled,
-              '-translate-x-full lg:translate-x-0': !sidebarToggled,
-            },
-          )}
+          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' : '',
           }}
         />
-
-        <main
-          className={cn(
-            'absolute will-change-width h-screen w-[100vw] right-0',
-            {
-              'lg:translate-x-0 lg:w-[calc(100vw)]': sidebarToggled,
-              'lg:translate-x-0 lg:w-[calc(100vw-275px)]': !sidebarToggled,
-            },
-          )}
-          style={{
-            transition: triggerTransition
-              ? 'width 0.2s ease-in-out, 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(100vw)] lg:translate-x-0': sidebarToggled,
+            'lg:w-[calc(100vw-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}
@@ -107,12 +106,11 @@ export const Shell = ({
               setActiveView={setActiveView}
             />
           ) : null}
-
-          <div className="h-[calc(100vh_-_70px)] overflow-auto mx-auto">
+          <div className="relative mx-auto h-[calc(100vh-3.3125rem)] grow md:h-full">
             {children}
           </div>
-        </main>
-      </div>
-    </div>
+        </div>
+      </main>
+    </>
   );
 };

package/src/components/sidebar/checking-results.tsx

@@ -0,0 +1,150 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentProps } from 'react';
+import { cn } from '../../utils';
+
+export type ResultStatus = 'error' | 'warning' | 'success';
+
+const statusStyles = {
+  error: 'text-red-600 hover:bg-red-600/10',
+  warning: 'text-yellow-300 hover:bg-yellow-400/10',
+  success: 'text-green-600 hover:bg-green-600/10',
+};
+
+interface ResultListProps {
+  status: ResultStatus;
+  label: React.ReactNode;
+
+  disabled?: boolean;
+  defaultOpen?: boolean;
+
+  children: React.ReactNode;
+}
+
+export const ResultList = ({
+  status,
+  label,
+
+  disabled,
+  defaultOpen,
+
+  children,
+}: ResultListProps) => {
+  return (
+    <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
+      <Collapsible.Trigger
+        className={cn(
+          'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          statusStyles[status],
+          disabled && 'cursor-not-allowed opacity-70',
+        )}
+        disabled={disabled}
+      >
+        <span
+          className={cn(
+            '-mt-[.125rem] transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            'rotate-0 group-data-[state=open]:rotate-90',
+          )}
+        >
+          <svg
+            fill="none"
+            height="15"
+            viewBox="0 0 15 15"
+            width="15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div className="flex flex-1 items-center gap-1 font-bold text-[.625rem] uppercase tracking-wide">
+          {label}
+        </div>
+      </Collapsible.Trigger>
+      {children ? (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {children}
+          </ol>
+        </Collapsible.Content>
+      ) : null}
+    </Collapsible.Root>
+  );
+};
+
+type ResultProps = {
+  status: ResultStatus;
+} & ComponentProps<typeof motion.li>;
+
+const resultAnimation = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+export const Result = ({ children, status, ...rest }: ResultProps) => {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.li
+        data-status={status}
+        initial="hidden"
+        layout
+        variants={resultAnimation}
+        animate="visible"
+        {...rest}
+        className={cn(
+          'group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5',
+          rest.className,
+        )}
+      >
+        {children}
+      </motion.li>
+    </AnimatePresence>
+  );
+};
+
+const titleStatusAnimation = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+interface ResultStatusDescriptionProps {
+  children: React.ReactNode;
+}
+
+Result.StatusDescription = ({ children }: ResultStatusDescriptionProps) => {
+  return (
+    <motion.div
+      className="mt-1 font-semibold text-[.625rem] uppercase"
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface ResultTitleProps {
+  children: React.ReactNode;
+}
+
+Result.Title = ({ children }: ResultTitleProps) => {
+  return (
+    <motion.div
+      className="flex w-full items-center gap-2 text-xs group-data-[status=error]/item:text-red-400 group-data-[status=success]/item:text-green-400 group-data-[status=warning]/item:text-yellow-300 "
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};

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

@@ -5,9 +5,9 @@ import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
-import { SidebarDirectory } from './sidebar-directory';
+import { FileTreeDirectory } from './file-tree-directory';
 
-export const SidebarDirectoryChildren = (props: {
+export const FileTreeDirectoryChildren = (props: {
   emailsDirectoryMetadata: EmailsDirectory;
   currentEmailOpenSlug?: string;
   open: boolean;
@@ -29,22 +29,20 @@ export const SidebarDirectoryChildren = (props: {
             initial={{ opacity: 0, height: 0 }}
           >
             {props.isRoot ? null : (
-              <div className="line absolute left-2.5 w-px h-full bg-slate-6" />
+              <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) => (
-                    <SidebarDirectory
-                      className="pl-4 py-0"
+                    <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
@@ -78,7 +76,7 @@ export const SidebarDirectoryChildren = (props: {
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'text-[14px] flex items-center align-middle pl-3 h-8 max-w-full rounded-md text-slate-11 relative transition-colors',
+                            '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)]',
                             {
                               'text-cyan-11': isCurrentPage,
                               'hover:text-slate-12':
@@ -94,19 +92,25 @@ export const SidebarDirectoryChildren = (props: {
                           {isCurrentPage ? (
                             <motion.span
                               animate={{ opacity: 1 }}
-                              className="absolute left-0 right-0 top-0 bottom-0 rounded-md bg-cyan-5 opacity-0"
+                              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 && (
-                                <div className="bg-cyan-11 w-px absolute top-1 left-1.5 h-6" />
-                              )}
+                              <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,
+                                }}
+                              />
                             </motion.span>
                           ) : null}
                           <IconFile
-                            className="absolute left-4 w-[24px] h-[24px]"
-                            height="24"
-                            width="24"
+                            className="absolute left-4 h-5 w-5"
+                            height="20"
+                            width="20"
                           />
                           <span className="truncate pl-8">{emailFilename}</span>
                         </motion.span>

package/src/components/sidebar/{sidebar-directory.tsx → file-tree-directory.tsx}

@@ -7,7 +7,7 @@ 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 { SidebarDirectoryChildren } from './sidebar-directory-children';
+import { FileTreeDirectoryChildren } from './file-tree-directory-children';
 
 interface SidebarDirectoryProps {
   emailsDirectoryMetadata: EmailsDirectory;
@@ -17,7 +17,7 @@ interface SidebarDirectoryProps {
 
 const persistedOpenDirectories = new Set<string>();
 
-export const SidebarDirectory = ({
+export const FileTreeDirectory = ({
   emailsDirectoryMetadata: directoryMetadata,
   className,
   currentEmailOpenSlug,
@@ -51,21 +51,21 @@ export const SidebarDirectory = ({
     >
       <Collapsible.Trigger
         className={cn(
-          'text-[14px] flex items-center font-medium gap-2 justify-between w-full my-1',
+          'mt-1 mb-1.5 flex w-full items-center justify-between gap-2 font-medium text-[14px]',
           {
             'cursor-pointer': !isEmpty,
           },
         )}
       >
-        <div className="flex items-center text-slate-11 transition ease-in-out duration-200 hover:text-slate-12 gap-1">
+        <div className="flex items-center gap-2 text-slate-11 transition duration-200 ease-in-out hover:text-slate-12">
           {open ? (
-            <IconFolderOpen height="24" width="24" />
+            <IconFolderOpen height="20" width="20" />
           ) : (
-            <IconFolder height="24" width="24" />
+            <IconFolder height="20" width="20" />
           )}
           <Heading
             as="h3"
-            className="transition ease-in-out duration-200 hover:text-slate-12"
+            className="transition duration-200 ease-in-out hover:text-slate-12"
             color="gray"
             size="2"
             weight="medium"
@@ -75,14 +75,13 @@ export const SidebarDirectory = ({
         </div>
         {!isEmpty ? (
           <IconArrowDown
-            className="data-[open=true]:rotate-180 transition-transform opacity-60 justify-self-end"
+            className="justify-self-end opacity-60 transition-transform data-[open=true]:rotate-180"
             data-open={open}
           />
         ) : null}
       </Collapsible.Trigger>
-
       {!isEmpty ? (
-        <SidebarDirectoryChildren
+        <FileTreeDirectoryChildren
           currentEmailOpenSlug={currentEmailOpenSlug}
           emailsDirectoryMetadata={directoryMetadata}
           open={open}

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 h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem] lg:max-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>
+            <FileTreeDirectoryChildren
+              currentEmailOpenSlug={currentEmailOpenSlug}
+              emailsDirectoryMetadata={emailsDirectoryMetadata}
+              isRoot
+              open
+            />
+          </React.Suspense>
+        </Collapsible.Root>
+      </nav>
+    </div>
+  );
+};

package/src/components/sidebar/image-checker.tsx

@@ -0,0 +1,161 @@
+import prettyBytes from 'pretty-bytes';
+import * as React from 'react';
+import {
+  type ImageCheckingResult,
+  checkImages,
+} from '../../actions/email-validation/check-images';
+import { Button } from '../button';
+import { Result, ResultList, type ResultStatus } from './checking-results';
+
+interface ImageCheckerResultsProps {
+  label: string;
+  status: ResultStatus;
+  results: ImageCheckingResult[];
+
+  justLoadedIn: boolean;
+}
+
+const ImageCheckerResults = ({
+  label,
+  status,
+  results,
+
+  justLoadedIn,
+}: ImageCheckerResultsProps) => {
+  return (
+    <ResultList
+      label={
+        <>
+          <span>{label}</span>
+          <span>({results.length})</span>
+        </>
+      }
+      defaultOpen={justLoadedIn}
+      status={status}
+      disabled={results.length === 0}
+    >
+      {results.map(({ source, status, checks }) => (
+        <Result className="flex gap-2" key={source} status={status}>
+          <img
+            width="24px"
+            className="my-auto rounded-sm"
+            src={source}
+            // biome-ignore lint/a11y/noRedundantAlt: The word image does fit in with the context and thus is not redundant
+            alt="image checked"
+          />
+          <div className="flex w-[calc(100%-.5rem-24px)] flex-col">
+            <Result.Title>
+              <span className="block overflow-hidden truncate text-ellipsis whitespace-nowrap">
+                {source}
+              </span>
+            </Result.Title>
+            <Result.StatusDescription>
+              {checks
+                .map((check) => {
+                  if (check.type === 'syntax' && !check.passed)
+                    return 'Invalid URL';
+                  if (check.type === 'accessibility' && !check.passed)
+                    return 'Missing alt';
+                  if (check.type === 'security')
+                    return check.passed ? 'Secure' : 'Insecure';
+                  if (
+                    check.type === 'fetch_attempt' &&
+                    check.metadata.fetchStatusCode
+                  )
+                    return `${check.metadata.fetchStatusCode}`;
+                  if (check.type === 'image_size' && check.metadata.byteCount)
+                    return `${prettyBytes(check.metadata.byteCount)}`;
+                  return null;
+                })
+                .filter(Boolean)
+                .join(' - ')}
+            </Result.StatusDescription>
+          </div>
+        </Result>
+      ))}
+    </ResultList>
+  );
+};
+
+interface ImageCheckerProps {
+  emailSlug: string;
+  emailMarkup: string;
+}
+
+export const ImageChecker = ({ emailSlug, emailMarkup }: ImageCheckerProps) => {
+  const cacheKey = `image-checking-results-${emailSlug.replaceAll('/', '-')}`;
+
+  const [results, setResults] = React.useState<
+    ImageCheckingResult[] | undefined
+  >();
+
+  React.useEffect(() => {
+    const cachedValue =
+      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
+    if (cachedValue) {
+      setResults(JSON.parse(cachedValue));
+    }
+  }, [cacheKey]);
+
+  const [justLoadedIn, setJustLoadedIn] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const handleRun = () => {
+    setLoading(true);
+    checkImages(emailMarkup, `${location.protocol}//${location.host}`)
+      .then((newResults) => {
+        setResults(newResults);
+        setJustLoadedIn(true);
+        localStorage.setItem(cacheKey, JSON.stringify(newResults));
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  };
+
+  const errorResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'error') || [],
+    [results],
+  );
+  const warningResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'warning') || [],
+    [results],
+  );
+  const successResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'success') || [],
+    [results],
+  );
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
+      {results ? (
+        <>
+          <ImageCheckerResults
+            label="Errors"
+            results={errorResults}
+            justLoadedIn={justLoadedIn}
+            status="error"
+          />
+          <ImageCheckerResults
+            label="Warnings"
+            results={warningResults}
+            justLoadedIn={justLoadedIn}
+            status="warning"
+          />
+          <ImageCheckerResults
+            label="Success"
+            results={successResults}
+            justLoadedIn={justLoadedIn}
+            status="success"
+          />
+        </>
+      ) : (
+        <span className="text-xs leading-relaxed">
+          Check if all links are valid and redirect to the correct pages.
+        </span>
+      )}
+      <Button loading={loading} onClick={handleRun}>
+        {results ? 'Re-run' : 'Run'}
+      </Button>
+    </div>
+  );
+};