feat(react-email): Spam Assassin checker for email templates (#1913)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Bu Kinoshita <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Lucas de França <[email protected]>

Author: 4 people

biome.json

@@ -22,7 +22,7 @@
         "noAutofocus": "off"
       },
       "nursery": {
-        "useSortedClasses": "warn"
+        "useSortedClasses": "off"
       },
       "suspicious": {
         "noArrayIndexKey": "off",

packages/react-email/package.json

@@ -39,6 +39,7 @@
     "socket.io": "4.8.1"
   },
   "devDependencies": {
+    "@lottiefiles/dotlottie-react": "0.12.3",
     "@radix-ui/colors": "1.0.1",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.1.4",
@@ -62,7 +63,6 @@
     "autoprefixer": "10.4.20",
     "clsx": "2.1.0",
     "framer-motion": "12.0.0-alpha.2",
-    "@lottiefiles/dotlottie-react": "0.12.3",
     "node-html-parser": "6.1.13",
     "postcss": "8.4.40",
     "prettier-plugin-tailwindcss": "0.6.6",
@@ -75,6 +75,7 @@
     "socket.io-client": "4.8.0",
     "sonner": "1.7.1",
     "source-map-js": "1.0.2",
+    "spamc": "0.0.5",
     "stacktrace-parser": "0.1.10",
     "tailwind-merge": "2.2.0",
     "tailwindcss": "3.4.0",

packages/react-email/src/app/preview/[...slug]/preview.tsx

@@ -111,6 +111,7 @@ const Preview = ({
       activeView={activeView}
       currentEmailOpenSlug={slug}
       markup={renderedEmailMetadata?.markup}
+      plainText={renderedEmailMetadata?.plainText}
       pathSeparator={pathSeparator}
       setActiveView={handleViewChange}
       setViewHeight={(height) => {

packages/react-email/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>
+));

packages/react-email/src/components/shell.tsx

@@ -10,6 +10,7 @@ type RootProps = React.ComponentPropsWithoutRef<'div'>;
 
 interface ShellProps extends RootProps {
   markup?: string;
+  plainText?: string;
   currentEmailOpenSlug?: string;
   pathSeparator?: string;
 
@@ -27,6 +28,7 @@ export const Shell = ({
   children,
   pathSeparator,
   markup,
+  plainText,
   activeView,
   setActiveView,
   viewHeight,
@@ -76,6 +78,7 @@ export const Shell = ({
           })}
           currentEmailOpenSlug={currentEmailOpenSlug}
           markup={markup}
+          plainText={plainText}
           style={{
             transition: triggerTransition ? 'transform 0.2s ease-in-out' : '',
           }}

packages/react-email/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-[.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 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>
                     );

packages/react-email/src/components/sidebar/image-checker.tsx

@@ -150,7 +150,8 @@ export const ImageChecker = ({ emailSlug, emailMarkup }: ImageCheckerProps) => {
         </>
       ) : (
         <span className="text-xs leading-relaxed">
-          Check if all links are valid and redirect to the correct pages.
+          Check if all images exist, have proper size, are accessible, and are
+          secure.
         </span>
       )}
       <Button loading={loading} onClick={handleRun}>

packages/react-email/src/components/sidebar/sidebar.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { clsx } from 'clsx';
@@ -15,18 +14,25 @@ import { useIconAnimation } from '../../hooks/use-icon-animation';
 import { cn } from '../../utils';
 import { Button } from '../button';
 import { Heading } from '../heading';
+import { IconBug } from '../icons/icon-bug';
 import { IconImage } from '../icons/icon-image';
 import { Tooltip } from '../tooltip';
 import { FileTree } from './file-tree';
 import { ImageChecker } from './image-checker';
 import { LinkChecker } from './link-checker';
+import { SpamAssassin } from './spam-assassin';
 
-type SidebarPanelValue = 'file-tree' | 'link-checker' | 'image-checker';
+type SidebarPanelValue =
+  | 'file-tree'
+  | 'link-checker'
+  | 'image-checker'
+  | 'spam-assassin';
 
 interface SidebarProps {
   className?: string;
   currentEmailOpenSlug?: string;
   markup?: string;
+  plainText?: string;
   style?: React.CSSProperties;
 }
 
@@ -179,6 +185,7 @@ export const Sidebar = ({
   className,
   currentEmailOpenSlug,
   markup: emailMarkup,
+  plainText: emailPlainText,
   style,
 }: SidebarProps) => {
   const pathname = usePathname();
@@ -256,6 +263,14 @@ export const Sidebar = ({
           >
             <IconImage className="h-6 w-6" />
           </TabTrigger>
+          <TabTrigger
+            activeTabValue={activePanelValue}
+            className="relative"
+            tabValue="spam-assassin"
+            tooltipText="Spam Assassin"
+          >
+            <IconBug className="h-6 w-6" />
+          </TabTrigger>
           <div className="mt-auto flex flex-col">
             <NavigationButton
               className="flex items-center justify-center"
@@ -325,6 +340,25 @@ export const Sidebar = ({
                 )}
               </Panel>
             )}
+            {activePanelValue === 'spam-assassin' && (
+              <Panel
+                title="Image Checker"
+                active={activePanelValue === 'spam-assassin'}
+              >
+                {currentEmailOpenSlug && emailMarkup && emailPlainText ? (
+                  <SpamAssassin
+                    emailMarkup={emailMarkup}
+                    emailPlainText={emailPlainText}
+                    emailSlug={currentEmailOpenSlug}
+                  />
+                ) : (
+                  <EmptyState
+                    title="Spam Assassin"
+                    onSelectTemplate={() => setActivePanelValue('file-tree')}
+                  />
+                )}
+              </Panel>
+            )}
             {activePanelValue === 'file-tree' && (
               <Panel
                 title="File Explorer"

packages/react-email/src/components/sidebar/spam-assassin.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { toast } from 'sonner';
+import { cn } from '../../utils';
+import { Button } from '../button';
+
+interface SpamAssassinProps {
+  emailSlug: string;
+  emailMarkup: string;
+  emailPlainText: string;
+}
+
+interface SpamCheckingResult {
+  checks: {
+    name: string;
+    description: string;
+    points: number;
+  }[];
+  isSpam: boolean;
+  points: number;
+}
+
+export const SpamAssassin = ({
+  emailSlug,
+  emailMarkup,
+  emailPlainText,
+}: SpamAssassinProps) => {
+  const cacheKey = `spam-checking-results-${emailSlug.replaceAll('/', '-')}`;
+
+  const [result, setResult] = React.useState<SpamCheckingResult | undefined>();
+
+  React.useEffect(() => {
+    const cachedValue =
+      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
+    if (cachedValue) {
+      try {
+        setResult(JSON.parse(cachedValue));
+      } catch (exception) {
+        setResult(undefined);
+      }
+    }
+  }, [cacheKey]);
+
+  const [loading, setLoading] = React.useState(false);
+
+  const handleRun = async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch('https://react.email/api/check-spam', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          html: emailMarkup,
+          plainText: emailPlainText,
+        }),
+      });
+
+      if (response.ok) {
+        const responseBody = (await response.json()) as
+          | { error: string }
+          | SpamCheckingResult;
+        if ('error' in responseBody) {
+          toast.error(responseBody.error);
+        } else {
+          setResult(responseBody);
+          localStorage.setItem(cacheKey, JSON.stringify(responseBody));
+        }
+      } else {
+        console.error(await response.text());
+        toast.error('Something went wrong');
+      }
+    } catch (exception) {
+      console.error(exception);
+      toast.error(JSON.stringify(exception));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
+      {result ? (
+        <div
+          className="group flex flex-col gap-2"
+          aria-label={result.isSpam ? 'spam' : 'ham'}
+        >
+          <table className="w-full border-collapse text-left text-slate-10 text-sm">
+            <thead className="mb-4 h-8 border border-t-0 border-slate-6 bg-slate-3 text-xs">
+              <tr>
+                <th scope="col" className="px-3 py-1">
+                  Rule
+                </th>
+                <th scope="col" className="px-3 py-1" align="right">
+                  Score
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {result.checks.length > 0 ? (
+                result.checks.map((check) => (
+                  <tr
+                    key={check.name}
+                    className="border-collapse border-slate-6 border-b"
+                  >
+                    <td className="px-3 py-2">
+                      <div className="font-medium text-slate-12">
+                        {check.name}
+                      </div>
+                      <div className="mt-1 text-slate-9 text-xs">
+                        {check.description}
+                      </div>
+                    </td>
+                    <td
+                      align="right"
+                      className={cn(
+                        'px-3 py-2 font-medium',
+                        check.points > 0 ? 'text-yellow-200' : null,
+                        check.points > 1 ? 'text-yellow-300' : null,
+                        check.points > 2 ? 'text-orange-400' : null,
+                        check.points > 3 ? 'text-red-400' : null,
+                      )}
+                    >
+                      {check.points.toFixed(1)}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={2} className="py-10 font-medium text-center">
+                    Nothing from Spam Assassin
+                  </td>
+                </tr>
+              )}
+            </tbody>
+            <tfoot className="mb-4 h-8 border border-slate-6 bg-slate-3">
+              <tr className="border-collapse border-slate-6 border-b">
+                <td className="px-3 py-2">Considered </td>
+                <td
+                  className="text-green-300 py-2 px-3 group-aria-[label=spam]:text-red-300 bg-transparent"
+                  align="right"
+                >
+                  {result.isSpam ? 'spam' : 'safe'}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      ) : (
+        <span className="text-xs leading-relaxed">
+          Check how well your email goes on a batch of spam testing.
+        </span>
+      )}
+      <Button loading={loading} onClick={handleRun}>
+        {result ? 'Re-run' : 'Run'}
+      </Button>
+    </div>
+  );
+};

packages/react-email/tsconfig.json

@@ -35,5 +35,5 @@
     "outDir": "dist"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": [".next", "dist", "node_modules", "**/*.spec.ts", "**/*.spec.tsx"]
+  "exclude": [".next", "dist", "node_modules"]
 }