react-email 3.0.6 → 4.0.0-alpha.0

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/{sidebar-directory-children.tsx → file-tree-directory-children.tsx}

@@ -1,14 +1,14 @@
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import { cn } from '../../utils';
+import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
+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;
@@ -32,22 +32,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="data-[root=true]:py-2 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 = isBaseEmailsDirectory
@@ -81,7 +79,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':
@@ -97,19 +95,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}

@@ -2,12 +2,12 @@
 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 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 { IconArrowDown } from '../icons/icon-arrow-down';
-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/link-checker.tsx

@@ -0,0 +1,291 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import Lottie from 'lottie-react';
+import * as React from 'react';
+import {
+  type LinkCheckingResult,
+  checkLinks,
+} from '../../actions/email-validation/check-links';
+import animatedLoadIcon from '../../animated-icons-data/load.json';
+import { cn } from '../../utils';
+import { Button } from '../button';
+
+const containerAnimation = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+const childAnimation = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+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 LinkCheckerProps {
+  emailSlug: string;
+  emailMarkup: string;
+}
+
+type ResultStatus = 'error' | 'warning' | 'success';
+
+interface CollapsibleTriggerProps {
+  count: number;
+  label: string;
+  variant: ResultStatus;
+  disabled?: boolean;
+}
+
+interface ResultSectionProps {
+  status: ResultStatus;
+  label: string;
+  results: LinkCheckingResult[];
+  open: boolean;
+}
+
+const CollapsibleTrigger = ({
+  count,
+  label,
+  variant,
+  disabled,
+}: CollapsibleTriggerProps) => (
+  <Collapsible.Trigger
+    className={clsx(
+      'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+      statusStyles[variant],
+      disabled && 'cursor-not-allowed opacity-70',
+    )}
+    disabled={disabled}
+  >
+    <span
+      className={clsx(
+        '-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">
+      <span>{label}</span>
+      <span>({count})</span>
+    </div>
+  </Collapsible.Trigger>
+);
+
+const ResultSection = ({
+  status,
+  label,
+  results,
+  open,
+}: ResultSectionProps) => {
+  const isEmpty = results.length === 0;
+
+  return (
+    <Collapsible.Root className="group" defaultOpen={open && !isEmpty}>
+      <CollapsibleTrigger
+        count={results.length}
+        label={label}
+        variant={status}
+        disabled={isEmpty}
+      />
+      {!isEmpty && (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {results.map((result, index) => (
+              <LinkResultView key={index} {...result} />
+            ))}
+          </ol>
+        </Collapsible.Content>
+      )}
+    </Collapsible.Root>
+  );
+};
+
+const LoadingButton = ({
+  loading,
+  onClick,
+  loadAnimation,
+  animatedLoadIcon,
+  children,
+}: any) => {
+  React.useEffect(() => {
+    if (loading) {
+      loadAnimation.current?.play();
+    }
+  }, [loading, loadAnimation]);
+
+  return (
+    <Button
+      className="mt-2 mb-4 min-w-[5rem] transition-all disabled:border-transparent disabled:bg-slate-11"
+      disabled={loading}
+      onClick={onClick}
+    >
+      <div className="flex items-center justify-center gap-2">
+        <span
+          className={cn(
+            '-ml-7 opacity-0 transition-opacity duration-200',
+            loading && 'opacity-100',
+          )}
+        >
+          <Lottie
+            animationData={animatedLoadIcon}
+            autoPlay={false}
+            className="h-5 w-5"
+            loop={true}
+            lottieRef={loadAnimation}
+          />
+        </span>
+        <span>{children}</span>
+      </div>
+    </Button>
+  );
+};
+
+const LinkResultView = (props: LinkCheckingResult) => (
+  <AnimatePresence mode="wait">
+    <motion.li
+      animate="visible"
+      className="group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5"
+      data-status={props.status}
+      initial="hidden"
+      layout
+      variants={containerAnimation}
+    >
+      <a
+        href={props.link}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="w-full"
+      >
+        <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={childAnimation}
+        >
+          <span className="block overflow-hidden truncate text-ellipsis whitespace-nowrap">
+            {props.link}
+          </span>
+        </motion.div>
+        <motion.div
+          className="mt-1 font-semibold text-[.625rem] uppercase"
+          variants={childAnimation}
+        >
+          {props.checks
+            .map((check) => {
+              if (check.type === 'syntax' && !check.passed)
+                return 'Invalid URL';
+              if (check.type === 'fetch_attempt')
+                return `${check.metadata.fetchStatusCode}`;
+              if (check.type === 'security')
+                return check.passed ? 'Secure' : 'Insecure';
+              return null;
+            })
+            .filter(Boolean)
+            .join(' - ')}
+        </motion.div>
+      </a>
+    </motion.li>
+  </AnimatePresence>
+);
+
+export const LinkChecker = ({ emailSlug, emailMarkup }: LinkCheckerProps) => {
+  const cacheKey = `link-checking-results-${emailSlug.replaceAll('/', '-')}`;
+  const cachedResults =
+    'localStorage' in window ? window.localStorage.getItem(cacheKey) : null;
+
+  const [results, setResults] = React.useState<
+    LinkCheckingResult[] | undefined
+  >(cachedResults ? JSON.parse(cachedResults) : undefined);
+  const [sectionsOpen, setSectionsOpen] = React.useState(false);
+  const loadAnimation = React.useRef(null);
+  const [loading, setLoading] = React.useState(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],
+  );
+
+  const handleRun = () => {
+    setLoading(true);
+    checkLinks(emailMarkup)
+      .then((newResults) => {
+        setResults(newResults);
+        setSectionsOpen(true);
+        localStorage.setItem(cacheKey, JSON.stringify(newResults));
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
+      {results ? (
+        <>
+          <ResultSection
+            label="Errors"
+            results={errorResults}
+            status="error"
+            open={sectionsOpen}
+          />
+          <ResultSection
+            label="Warnings"
+            results={warningResults}
+            status="warning"
+            open={sectionsOpen}
+          />
+          <ResultSection
+            label="Success"
+            results={successResults}
+            status="success"
+            open={sectionsOpen}
+          />
+        </>
+      ) : (
+        <span className="text-xs leading-relaxed">
+          Check if all links are valid and redirect to the correct pages.
+        </span>
+      )}
+      <LoadingButton
+        loading={loading}
+        onClick={handleRun}
+        loadAnimation={loadAnimation}
+        animatedLoadIcon={animatedLoadIcon}
+      >
+        {results ? 'Re-run' : 'Run'}
+      </LoadingButton>
+    </div>
+  );
+};