@react-email/preview-server 1.0.0-canary.0

package/src/components/toolbar/spam-assassin.tsx

@@ -0,0 +1,155 @@
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { cn, sanitize } from '../../utils';
+import { IconWarning } from '../icons/icon-warning';
+import { Results } from './results';
+
+interface SpamAssassinProps {
+  result: SpamCheckingResult | undefined;
+}
+
+export interface SpamCheckingResult {
+  checks: {
+    name: string;
+    description: string;
+    points: number;
+  }[];
+  isSpam: boolean;
+  points: number;
+}
+
+function toSorted<T>(array: T[], sorter: (a: T, b: T) => number): T[] {
+  const cloned = [...array];
+  cloned.sort(sorter);
+  return cloned;
+}
+
+export const useSpamAssassin = ({
+  markup,
+  plainText,
+
+  initialResult,
+}: {
+  markup: string;
+  plainText: string;
+
+  initialResult?: SpamCheckingResult;
+}) => {
+  const [result, setResult] = useState<SpamCheckingResult | undefined>(
+    initialResult,
+  );
+
+  const [loading, setLoading] = useState(false);
+  const isLoadingRef = useRef(false);
+
+  const load = async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
+    setLoading(true);
+
+    try {
+      const response = await fetch('https://react.email/api/check-spam', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          html: markup,
+          plainText: plainText,
+        }),
+      });
+
+      const responseBody = (await response.json()) as
+        | { error: string }
+        | SpamCheckingResult;
+      if ('error' in responseBody) {
+        toast.error(responseBody.error);
+      } else {
+        setResult(responseBody);
+        return responseBody;
+      }
+    } catch (exception) {
+      console.error(exception);
+      toast.error(JSON.stringify(exception));
+    } finally {
+      setLoading(false);
+      isLoadingRef.current = false;
+    }
+  };
+
+  return [result, { loading, load }] as const;
+};
+
+export const SpamAssassin = ({ result }: SpamAssassinProps) => {
+  return (
+    <>
+      {result ? (
+        <Results>
+          <Results.Row className="sticky border-b top-0">
+            <Results.Column className="uppercase">
+              <span className="flex gap-2 items-center">
+                <IconWarning
+                  className={cn(
+                    result.points === 0 ? 'text-green-400' : null,
+                    result.points > 0 && result.points <= 1.5 ? null : null,
+                    result.points > 1.5 ? 'text-yellow-100' : null,
+                    result.points > 3 ? 'text-orange-400' : null,
+                    result.points >= 5 ? 'text-red-400' : null,
+                  )}
+                />
+                Score
+              </span>
+            </Results.Column>
+            <Results.Column>
+              {result.points === 0
+                ? 'Congratulations! Your email is clean of abuse indicators.'
+                : 'Higher scores are better'}
+            </Results.Column>
+            <Results.Column className="text-right tracking-tighter font-bold">
+              <span
+                className={cn(
+                  'text-3xl',
+                  result.points === 0 ? 'text-green-400' : null,
+                  result.points > 0 && result.points <= 1.5 ? null : null,
+                  result.points > 1.5 ? 'text-yellow-200' : null,
+                  result.points > 3 ? 'text-orange-400' : null,
+                  result.points >= 5 ? 'text-red-400' : null,
+                )}
+              >
+                {(10 - result.points).toFixed(1)}
+              </span>{' '}
+              <span className="text-lg">/ 10</span>
+            </Results.Column>
+          </Results.Row>
+          {toSorted(result.checks, (a, b) => b.points - a.points).map(
+            (check) => (
+              <Results.Row key={check.name}>
+                <Results.Column className="uppercase">
+                  <span className="flex gap-2 items-center">
+                    <IconWarning
+                      className={cn(
+                        check.points > 1 ? 'text-yellow-200' : null,
+                        check.points > 2 ? 'text-orange-400' : null,
+                        check.points > 3 ? 'text-red-400' : null,
+                      )}
+                    />
+                    {sanitize(check.name)}
+                  </span>
+                </Results.Column>
+                <Results.Column>{check.description}</Results.Column>
+                <Results.Column
+                  className={cn(
+                    'text-right font-mono tracking-tighter',
+                    check.points > 1 ? 'text-yellow-200' : null,
+                    check.points > 2 ? 'text-orange-400' : null,
+                    check.points > 3 ? 'text-red-400' : null,
+                  )}
+                >
+                  -{check.points.toFixed(1)}
+                </Results.Column>
+              </Results.Row>
+            ),
+          )}
+        </Results>
+      ) : null}
+    </>
+  );
+};

package/src/components/toolbar/toolbar-button.tsx

@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { Tooltip } from '../tooltip';
+
+interface ToolbarButtonProps extends React.ComponentProps<'button'> {
+  children: React.ReactNode;
+  active?: boolean;
+  tooltip?: React.ReactNode;
+  delayDuration?: number;
+}
+
+export const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  delayDuration = 500,
+  ...props
+}: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Provider>
+      <Tooltip delayDuration={delayDuration}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            {...props}
+            className={cn(
+              'h-full w-fit font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
+              'hover:text-slate-12 transition-colors',
+              active && 'data-[state=active]:text-cyan-11',
+              className,
+            )}
+          >
+            {children}
+            {active ? (
+              <motion.span
+                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
+                layoutId="active-toolbar-button"
+                transition={{
+                  type: 'spring',
+                  bounce: 0.2,
+                  duration: 0.6,
+                }}
+              />
+            ) : null}
+          </button>
+        </Tooltip.Trigger>
+        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};

package/src/components/toolbar/use-cached-state.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'react';
+
+export const useCachedState = <T>(key: string) => {
+  let value: T | undefined = undefined;
+  if ('localStorage' in global) {
+    const storedValue = global.localStorage.getItem(key);
+    if (storedValue !== null && storedValue !== 'undefined') {
+      try {
+        value = JSON.parse(storedValue) as T;
+      } catch (exception) {
+        console.warn(
+          'Failed to load stored value for',
+          key,
+          'with value',
+          storedValue,
+        );
+      }
+    }
+  }
+
+  return [
+    useSyncExternalStore(
+      () => () => {},
+      () => value,
+      () => undefined,
+    ),
+    function setValue(newValue: T | undefined) {
+      if ('localStorage' in global) {
+        global.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+  ] as const;
+};

package/src/components/toolbar.tsx

@@ -0,0 +1,349 @@
+'use client';
+import * as Tabs from '@radix-ui/react-tabs';
+import { LayoutGroup } from 'framer-motion';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { use, useEffect } from 'react';
+import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
+import { isBuilding } from '../app/env';
+import { PreviewContext } from '../contexts/preview';
+import { cn } from '../utils';
+import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconCheck } from './icons/icon-check';
+import { IconInfo } from './icons/icon-info';
+import { IconReload } from './icons/icon-reload';
+import { Compatibility, useCompatibility } from './toolbar/compatibility';
+import { Linter, type LintingRow, useLinter } from './toolbar/linter';
+import {
+  SpamAssassin,
+  type SpamCheckingResult,
+  useSpamAssassin,
+} from './toolbar/spam-assassin';
+import { ToolbarButton } from './toolbar/toolbar-button';
+import { useCachedState } from './toolbar/use-cached-state';
+
+export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
+
+export const useToolbarState = () => {
+  const searchParams = useSearchParams();
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
+    | undefined;
+
+  return {
+    activeTab,
+
+    toggled: activeTab !== undefined,
+  };
+};
+
+const ToolbarInner = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+  serverCompatibilityResults,
+
+  markup,
+  reactMarkup,
+  plainText,
+  emailPath,
+  emailSlug,
+}: ToolbarProps & {
+  markup: string;
+  reactMarkup: string;
+  plainText: string;
+  emailSlug: string;
+  emailPath: string;
+}) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const { activeTab, toggled } = useToolbarState();
+
+  const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
+    const params = new URLSearchParams(searchParams);
+    if (newValue === undefined) {
+      params.delete('toolbar-panel');
+    } else {
+      params.set('toolbar-panel', newValue);
+    }
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
+  };
+
+  const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
+    useCachedState<SpamCheckingResult>(
+      `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
+    useSpamAssassin({
+      markup,
+      plainText,
+
+      initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+    });
+
+  const [cachedLintingRows, setCachedLintingRows] = useCachedState<
+    LintingRow[]
+  >(`linter-${emailSlug.replaceAll('/', '-')}`);
+  const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
+    markup,
+
+    initialRows: serverLintingRows ?? cachedLintingRows,
+  });
+  const [cachedCompatibilityResults, setCachedCompatibilityResults] =
+    useCachedState<CompatibilityCheckingResult[]>(
+      `compatibility-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [
+    compatibilityCheckingResults,
+    { load: loadCompatibility, loading: compatibilityLoading },
+  ] = useCompatibility({
+    emailPath,
+    reactMarkup,
+
+    initialResults: serverCompatibilityResults ?? cachedCompatibilityResults,
+  });
+
+  if (!isBuilding) {
+    // biome-ignore lint/correctness/useHookAtTopLevel: This is fine since isBuilding does not change at runtime
+    useEffect(() => {
+      (async () => {
+        const lintingRows = await loadLinting();
+        setCachedLintingRows(lintingRows);
+
+        const spamCheckingResult = await loadSpamChecking();
+        setCachedSpamCheckingResult(spamCheckingResult);
+
+        const compatibilityCheckingResults = await loadCompatibility();
+        setCachedCompatibilityResults(compatibilityCheckingResults);
+      })();
+    }, []);
+  }
+
+  return (
+    <div
+      data-toggled={toggled}
+      className={cn(
+        'absolute bottom-0 left-0 right-0',
+        'border-t border-slate-6 group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'data-[toggled=false]:translate-y-[10.625rem]',
+      )}
+    >
+      <Tabs.Root
+        value={activeTab ?? ''}
+        onValueChange={(newValue) => {
+          setActivePanelValue(newValue as ToolbarTabValue);
+        }}
+        asChild
+      >
+        <div className="flex flex-col h-full">
+          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full flex-shrink-0">
+            <LayoutGroup id="toolbar">
+              <Tabs.Trigger asChild value="linter">
+                <ToolbarButton active={activeTab === 'linter'}>
+                  Linter
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="compatibility">
+                <ToolbarButton active={activeTab === 'compatibility'}>
+                  Compatibility
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="spam-assassin">
+                <ToolbarButton active={activeTab === 'spam-assassin'}>
+                  Spam
+                </ToolbarButton>
+              </Tabs.Trigger>
+            </LayoutGroup>
+            <div className="flex gap-0.5 ml-auto">
+              <ToolbarButton
+                delayDuration={0}
+                tooltip={
+                  (activeTab === 'linter' &&
+                    'The Linter tab checks all the images and links for common issues like missing alt text, broken URLs, insecure HTTP methods, and more.') ||
+                  (activeTab === 'spam-assassin' &&
+                    'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
+                  (activeTab === 'compatibility' &&
+                    'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
+                  'Info'
+                }
+              >
+                <IconInfo size={24} />
+              </ToolbarButton>
+              {isBuilding ? null : (
+                <ToolbarButton
+                  tooltip="Reload"
+                  disabled={lintLoading || spamLoading}
+                  onClick={async () => {
+                    if (activeTab === undefined) {
+                      setActivePanelValue('linter');
+                    }
+                    if (activeTab === 'spam-assassin') {
+                      await loadSpamChecking();
+                    } else if (activeTab === 'linter') {
+                      await loadLinting();
+                    } else if (activeTab === 'compatibility') {
+                      await loadCompatibility();
+                    }
+                  }}
+                >
+                  <IconReload
+                    size={24}
+                    className={cn({
+                      'animate-spin opacity-60 animate-spin-fast':
+                        lintLoading || spamLoading,
+                    })}
+                  />
+                </ToolbarButton>
+              )}
+              <ToolbarButton
+                tooltip="Toggle toolbar"
+                onClick={() => {
+                  if (activeTab === undefined) {
+                    setActivePanelValue('linter');
+                  } else {
+                    setActivePanelValue(undefined);
+                  }
+                }}
+              >
+                <IconArrowDown
+                  size={24}
+                  className="transition-transform group-data-[toggled=false]/toolbar:rotate-180"
+                />
+              </ToolbarButton>
+            </div>
+          </Tabs.List>
+
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto pr-3 pl-4 pt-3">
+            <Tabs.Content value="linter">
+              {lintLoading ? (
+                <LoadingState message="Analyzing your code for linting issues..." />
+              ) : lintingRows?.length === 0 ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>All good</SuccessTitle>
+                  <SuccessDescription>
+                    No linting issues found.
+                  </SuccessDescription>
+                </SuccessWrapper>
+              ) : (
+                <Linter rows={lintingRows ?? []} />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="compatibility">
+              {compatibilityLoading ? (
+                <LoadingState message="Checking email compatibility..." />
+              ) : compatibilityCheckingResults?.length === 0 ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>Great compatibility</SuccessTitle>
+                  <SuccessDescription>
+                    Template should render properly everywhere.
+                  </SuccessDescription>
+                </SuccessWrapper>
+              ) : (
+                <Compatibility results={compatibilityCheckingResults ?? []} />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="spam-assassin">
+              {spamLoading ? (
+                <LoadingState message="Evaluating your email for spam indicators..." />
+              ) : spamCheckingResult?.isSpam === false ? (
+                <SuccessWrapper>
+                  <SuccessIcon />
+                  <SuccessTitle>10/10</SuccessTitle>
+                  <SuccessDescription>
+                    Your email is clean of abuse indicators.
+                  </SuccessDescription>
+                </SuccessWrapper>
+              ) : (
+                <SpamAssassin result={spamCheckingResult} />
+              )}
+            </Tabs.Content>
+          </div>
+        </div>
+      </Tabs.Root>
+    </div>
+  );
+};
+
+const LoadingState = ({ message }: { message: string }) => {
+  return (
+    <div className="flex flex-col items-center justify-center pt-8">
+      <div className="relative mb-8 flex items-center justify-center">
+        <div className="h-12 w-12 rounded-full bg-gradient-to-br from-cyan-400/80 to-cyan-600/80 opacity-10 blur-xl absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse" />
+        <div className="h-12 w-12 rounded-full border border-slate-4 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+        <div className="h-10 w-10 rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="h-5 w-5 rounded-full border-2 border-white/50 border-t-transparent animate-spin-fast" />
+        </div>
+      </div>
+      <h3 className="text-slate-12 font-medium text-base mb-1">Processing</h3>
+      <p className="text-slate-11 text-sm text-center max-w-[320px]">
+        {message}
+      </p>
+    </div>
+  );
+};
+
+const SuccessWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col items-center justify-center pt-8">
+      {children}
+    </div>
+  );
+};
+
+const SuccessIcon = () => {
+  return (
+    <div className="relative mb-8 flex items-center justify-center">
+      <div className="h-16 w-16 rounded-full bg-gradient-to-br from-green-300/20 opacity-80 to-emerald-500/30 blur-md absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+      <div className="h-12 w-12 rounded-full bg-gradient-to-br from-green-400/80 opacity-10 to-emerald-600/80 absolute m-auto left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg" />
+      <div className="h-10 w-10 rounded-full bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]">
+        <IconCheck size={24} className="text-white drop-shadow-sm" />
+      </div>
+    </div>
+  );
+};
+
+const SuccessTitle = ({ children }) => {
+  return (
+    <h3 className="text-slate-12 font-medium text-base mb-1">{children}</h3>
+  );
+};
+
+const SuccessDescription = ({ children }) => {
+  return (
+    <p className="text-slate-11 text-sm text-center max-w-[320px]">
+      {children}
+    </p>
+  );
+};
+
+interface ToolbarProps {
+  serverSpamCheckingResult: SpamCheckingResult | undefined;
+  serverLintingRows: LintingRow[] | undefined;
+  serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
+}
+
+export const Toolbar = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+  serverCompatibilityResults,
+}: ToolbarProps) => {
+  const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
+
+  if (renderedEmailMetadata === undefined) return null;
+  const { markup, plainText, reactMarkup } = renderedEmailMetadata;
+
+  return (
+    <ToolbarInner
+      emailPath={emailPath}
+      emailSlug={emailSlug}
+      markup={markup}
+      reactMarkup={reactMarkup}
+      plainText={plainText}
+      serverLintingRows={serverLintingRows}
+      serverSpamCheckingResult={serverSpamCheckingResult}
+      serverCompatibilityResults={serverCompatibilityResults}
+    />
+  );
+};

package/src/components/tooltip-content.tsx

@@ -0,0 +1,31 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../utils';
+
+type ContentElement = React.ComponentRef<typeof TooltipPrimitive.Content>;
+type ContentProps = React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+>;
+
+export type TooltipProps = ContentProps;
+
+export const TooltipContent = React.forwardRef<
+  ContentElement,
+  Readonly<TooltipProps>
+>(({ sideOffset = 6, children, ...props }, forwardedRef) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      {...props}
+      className={cn(
+        'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
+        'font-sans max-w-60',
+      )}
+      ref={forwardedRef}
+      sideOffset={sideOffset}
+    >
+      {children}
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+));
+
+TooltipContent.displayName = 'TooltipContent';

package/src/components/tooltip.tsx

@@ -0,0 +1,19 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type * as React from 'react';
+import { TooltipContent } from './tooltip-content';
+
+type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+
+export type TooltipProps = RootProps;
+
+export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
+  children,
+  ...props
+}) => <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>;
+
+export const Tooltip = Object.assign(TooltipRoot, {
+  Arrow: TooltipPrimitive.TooltipArrow,
+  Provider: TooltipPrimitive.TooltipProvider,
+  Content: TooltipContent,
+  Trigger: TooltipPrimitive.TooltipTrigger,
+});