react-email 4.0.0-alpha.4 → 4.0.0-alpha.5

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

@@ -0,0 +1,155 @@
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { cn } from '../../utils';
+import { IconWarning } from '../icons/icon-warning';
+import { Results } from './results';
+
+interface SpamAssassinProps {
+  result: SpamCheckingResult | undefined;
+}
+
+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 = ({
+  slug,
+  markup,
+  plainText,
+}: {
+  slug: string;
+  markup: string;
+  plainText: string;
+}) => {
+  const cacheKey = `spam-assassin-${slug.replaceAll('/', '-')}`;
+
+  const [result, setResult] = useState<SpamCheckingResult | undefined>();
+
+  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] = useState(false);
+
+  const load = 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: markup,
+          plainText: plainText,
+        }),
+      });
+
+      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 [result, { loading, load }] as const;
+};
+
+export const SpamAssassin = ({ result }: SpamAssassinProps) => {
+  return (
+    <>
+      {result ? (
+        <Results>
+          <Results.Row className="sticky border-b-2 top-0 bg-black">
+            <Results.Column className="uppercase">
+              <span className="flex gap-1 items-center">
+                <IconWarning
+                  className={cn(
+                    result.points > 1.5 ? 'text-yellow-200' : null,
+                    result.points > 3 ? 'text-orange-300' : null,
+                    result.points >= 5 ? 'text-red-400' : null,
+                  )}
+                />
+                Score
+              </span>
+            </Results.Column>
+            <Results.Column>Lower scores are better</Results.Column>
+            <Results.Column
+              className={cn(
+                'text-right text-2xl tracking-tighter font-mono',
+                result.points > 1.5 ? 'text-yellow-200' : null,
+                result.points > 3 ? 'text-orange-300' : null,
+                result.points >= 5 ? 'text-red-400' : null,
+              )}
+            >
+              {result.points.toFixed(1)}
+            </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-1 items-center">
+                    <IconWarning
+                      className={cn(
+                        check.points > 1 ? 'text-yellow-200' : null,
+                        check.points > 2 ? 'text-orange-300' : null,
+                        check.points > 3 ? 'text-red-400' : null,
+                      )}
+                    />
+                    {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-300' : null,
+                    check.points > 3 ? 'text-red-400' : null,
+                  )}
+                >
+                  {check.points.toFixed(1)}
+                </Results.Column>
+              </Results.Row>
+            ),
+          )}
+        </Results>
+      ) : null}
+    </>
+  );
+};

package/src/components/toolbar.tsx

@@ -0,0 +1,189 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import { LayoutGroup, motion } from 'framer-motion';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { cn } from '../utils';
+import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconReload } from './icons/icon-reload';
+import { IconScanner } from './icons/icon-scanner';
+import { IconScissors } from './icons/icon-scissors';
+import { Linter, useLinter } from './toolbar/linter';
+import { SpamAssassin, useSpamAssassin } from './toolbar/spam-assassin';
+import { Tooltip } from './tooltip';
+
+type ToolbarProps = React.ComponentProps<'div'> & {
+  emailSlug: string;
+  markup: string;
+  plainText: string;
+};
+
+type ActivePanelValue = 'linter' | 'spam-assassin';
+
+interface ToolbarButton extends React.ComponentProps<'button'> {
+  children: React.ReactNode;
+  active?: boolean;
+  tooltip?: React.ReactNode;
+}
+
+const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  ...props
+}: ToolbarButton) => {
+  return (
+    <Tooltip.Provider>
+      <Tooltip>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            {...props}
+            className={cn(
+              'h-full w-fit font-medium flex text-sm text-slate-10 items-center align-middle justify-center px-1 py-2 gap-1 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>
+  );
+};
+
+export const Toolbar = ({
+  emailSlug,
+  markup,
+  plainText,
+  className,
+  ...rest
+}: ToolbarProps) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const activePanelValue = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ActivePanelValue
+    | undefined;
+
+  const toggled = activePanelValue !== undefined;
+
+  const setActivePanelValue = (newValue: ActivePanelValue | undefined) => {
+    console.log(newValue);
+    const params = new URLSearchParams(searchParams);
+    if (newValue === undefined) {
+      params.delete('toolbar-panel');
+    } else {
+      params.set('toolbar-panel', newValue);
+    }
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
+    slug: emailSlug,
+    markup,
+    plainText,
+  });
+
+  const [lintingResults, { load: loadLinting }] = useLinter({
+    slug: emailSlug,
+    markup,
+  });
+
+  useEffect(() => {
+    loadLinting();
+    loadSpamChecking();
+  }, []);
+
+  return (
+    <div
+      {...rest}
+      data-toggled={toggled}
+      className={cn(
+        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
+        'data-[toggled=false]:h-8',
+        className,
+      )}
+    >
+      <Tabs.Root
+        value={activePanelValue}
+        onValueChange={(newValue) => {
+          setActivePanelValue(newValue as ActivePanelValue);
+        }}
+        asChild
+      >
+        <div className="flex flex-col h-full">
+          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
+            <LayoutGroup id="toolbar">
+              <Tabs.Trigger asChild value="spam-assassin">
+                <ToolbarButton active={activePanelValue === 'spam-assassin'}>
+                  <IconScissors />
+                  Spam Assassin
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="linter">
+                <ToolbarButton active={activePanelValue === 'linter'}>
+                  <IconScanner />
+                  Linter
+                </ToolbarButton>
+              </Tabs.Trigger>
+            </LayoutGroup>
+            <div className="flex gap-1 ml-auto">
+              <ToolbarButton
+                tooltip="Reload"
+                onClick={() => {
+                  if (activePanelValue === 'spam-assassin') {
+                    void loadSpamChecking();
+                  } else if (activePanelValue === 'linter') {
+                    void loadLinting();
+                  } else {
+                    setActivePanelValue('linter');
+                    void loadLinting();
+                  }
+                }}
+              >
+                <IconReload />
+              </ToolbarButton>
+              <ToolbarButton
+                tooltip="Toggle toolbar"
+                onClick={() => {
+                  if (activePanelValue === undefined) {
+                    setActivePanelValue('linter');
+                  } else {
+                    setActivePanelValue(undefined);
+                  }
+                }}
+              >
+                <IconArrowDown 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 px-2">
+            <Tabs.Content value="linter">
+              <Linter results={lintingResults} />
+            </Tabs.Content>
+            <Tabs.Content value="spam-assassin">
+              <SpamAssassin result={spamCheckingResult} />
+            </Tabs.Content>
+          </div>
+        </div>
+      </Tabs.Root>
+    </div>
+  );
+};

package/src/components/tooltip-content.tsx

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

package/src/components/topbar.tsx

@@ -1,37 +1,25 @@
 'use client';
 
+import { use } from 'react';
 import { Heading } from './heading';
 import { IconHideSidebar } from './icons/icon-hide-sidebar';
-import { Send } from './send';
+import { ShellContext } from './shell';
 import { Tooltip } from './tooltip';
-import { ActiveViewToggleGroup } from './topbar/active-view-toggle-group';
-import { ViewSizeControls } from './topbar/view-size-controls';
 
 interface TopbarProps {
   currentEmailOpenSlug: string;
   pathSeparator: string;
-  markup?: string;
-  onToggleSidebar?: () => void;
-  activeView?: string;
-  setActiveView?: (view: string) => void;
-  viewWidth?: number;
-  setViewWidth?: (width: number) => void;
-  viewHeight?: number;
-  setViewHeight?: (height: number) => void;
+
+  children: React.ReactNode;
 }
 
 export const Topbar = ({
   currentEmailOpenSlug,
   pathSeparator,
-  markup,
-  activeView,
-  setActiveView,
-  viewWidth,
-  setViewWidth,
-  viewHeight,
-  setViewHeight,
-  onToggleSidebar,
+  children,
 }: TopbarProps) => {
+  const { toggleSidebar } = use(ShellContext)!;
+
   return (
     <Tooltip.Provider>
       <header className="relative flex h-[3.3125rem] items-center justify-between gap-3 border-slate-6 border-b px-3">
@@ -41,9 +29,7 @@ export const Topbar = ({
               <button
                 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();
-                  }
+                  toggleSidebar();
                 }}
                 type="button"
               >
@@ -59,25 +45,26 @@ export const Topbar = ({
           </div>
         </div>
         <div className="flex w-full items-center justify-between gap-3 lg:w-fit lg:justify-start">
-          {setViewWidth && setViewHeight && viewWidth && viewHeight ? (
-            <ViewSizeControls
-              setViewHeight={setViewHeight}
-              setViewWidth={setViewWidth}
-              viewHeight={viewHeight}
-              viewWidth={viewWidth}
-            />
-          ) : null}
-          {activeView && setActiveView ? (
-            <ActiveViewToggleGroup
-              activeView={activeView}
-              setActiveView={setActiveView}
-            />
-          ) : null}
-          {markup ? (
-            <div className="flex justify-end">
-              <Send markup={markup} />
-            </div>
-          ) : null}
+          {children}
+          {/* {setViewWidth && setViewHeight && viewWidth && viewHeight ? ( */}
+          {/*   <ViewSizeControls */}
+          {/*     setViewHeight={setViewHeight} */}
+          {/*     setViewWidth={setViewWidth} */}
+          {/*     viewHeight={viewHeight} */}
+          {/*     viewWidth={viewWidth} */}
+          {/*   /> */}
+          {/* ) : null} */}
+          {/* {activeView && setActiveView ? ( */}
+          {/*   <ActiveViewToggleGroup */}
+          {/*     activeView={activeView} */}
+          {/*     setActiveView={setActiveView} */}
+          {/*   /> */}
+          {/* ) : null} */}
+          {/* {markup ? ( */}
+          {/*   <div className="flex justify-end"> */}
+          {/*     <Send markup={markup} /> */}
+          {/*   </div> */}
+          {/* ) : null} */}
         </div>
       </header>
     </Tooltip.Provider>

package/tailwind.config.ts

@@ -71,6 +71,7 @@ const config: Config = {
       },
       fontFamily: {
         sans: ['var(--font-inter)', ...fontFamily.sans],
+        mono: ['var(--font-sf-mono)', ...fontFamily.mono],
       },
       keyframes: {
         shine: {