react-email 4.0.0-alpha.3 → 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/src/utils/__snapshots__/get-email-component.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;
+exports[`getEmailComponent() > with a demo email template 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="/static/vercel-logo.png"/><link rel="preload" as="image" href="/static/vercel-user.png"/><link rel="preload" as="image" href="/static/vercel-arrow.png"/><link rel="preload" as="image" href="/static/vercel-team.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><!--$--></head><body style="background-color:rgb(255,255,255);margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;padding-left:0.5rem;padding-right:0.5rem"><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Join Alan on Vercel<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);border-radius:0.25rem;margin-top:40px;margin-bottom:40px;margin-left:auto;margin-right:auto;padding:20px;max-width:465px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin-top:32px"><tbody><tr><td><img alt="Vercel" height="37" src="/static/vercel-logo.png" style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" width="40"/></td></tr></tbody></table><h1 style="color:rgb(0,0,0);font-size:24px;font-weight:400;text-align:center;padding:0px;margin-top:30px;margin-bottom:30px;margin-left:0px;margin-right:0px">Join <strong>Enigma</strong> on <strong>Vercel</strong></h1><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">Hello <!-- -->alanturing<!-- -->,</p><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0"><strong>Alan</strong> (<a href="mailto:alan.turing@example.com" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">alan.turing@example.com</a>) has invited you to the <strong>Enigma</strong> team on<!-- --> <strong>Vercel</strong>.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="right" data-id="__react-email-column"><img height="64" src="/static/vercel-user.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td><td align="center" data-id="__react-email-column"><img alt="invited you to" height="9" src="/static/vercel-arrow.png" style="display:block;outline:none;border:none;text-decoration:none" width="12"/></td><td align="left" data-id="__react-email-column"><img height="64" src="/static/vercel-team.png" style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none" width="64"/></td></tr></tbody></table></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="text-align:center;margin-top:32px;margin-bottom:32px"><tbody><tr><td><a href="https://vercel.com/teams/invite/foo" style="background-color:rgb(0,0,0);border-radius:0.25rem;color:rgb(255,255,255);font-size:12px;font-weight:600;text-decoration-line:none;text-align:center;padding-left:1.25rem;padding-right:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;line-height:100%;text-decoration:none;display:inline-block;max-width:100%;mso-padding-alt:0px;padding:12px 20px 12px 20px" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px">Join the team</span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a></td></tr></tbody></table><p style="color:rgb(0,0,0);font-size:14px;line-height:24px;margin:16px 0">or copy and paste this URL into your browser:<!-- --> <a href="https://vercel.com/teams/invite/foo" style="color:rgb(37,99,235);text-decoration-line:none" target="_blank">https://vercel.com/teams/invite/foo</a></p><hr style="border-width:1px;border-style:solid;border-color:rgb(234,234,234);margin-top:26px;margin-bottom:26px;margin-left:0px;margin-right:0px;width:100%;border:none;border-top:1px solid #eaeaea"/><p style="color:rgb(102,102,102);font-size:12px;line-height:24px;margin:16px 0">This invitation was intended for<!-- --> <span style="color:rgb(0,0,0)">alanturing</span>. This invite was sent from <span style="color:rgb(0,0,0)">204.13.186.218</span> <!-- -->located in<!-- --> <span style="color:rgb(0,0,0)">São Paulo, Brazil</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account&#x27;s safety, please reply to this email to get in touch with us.</p></td></tr></tbody></table><!--/$--></body></html>"`;

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: {

package/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"]
 }

package/vitest.config.ts

@@ -1,6 +1,4 @@
-import type { TsconfigRaw } from 'esbuild';
 import { defineConfig } from 'vitest/config';
-import tsconfig from './tsconfig.test.json';
 
 export default defineConfig({
   test: {
@@ -8,6 +6,10 @@ export default defineConfig({
     environment: 'happy-dom',
   },
   esbuild: {
-    tsconfigRaw: tsconfig as TsconfigRaw,
+    tsconfigRaw: {
+      compilerOptions: {
+        jsx: 'react-jsx',
+      },
+    },
   },
 });