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

package/src/components/toolbar/linter.tsx

@@ -0,0 +1,310 @@
+import prettyBytes from 'pretty-bytes';
+import { useRef, useState } from 'react';
+import { nicenames } from '../../actions/email-validation/caniemail-data';
+import type { CompatibilityCheckingResult } from '../../actions/email-validation/check-compatibility';
+import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
+import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
+import { cn } from '../../utils';
+import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
+import { IconWarning } from '../icons/icon-warning';
+import { Results } from './results';
+
+export type LintingRow =
+  | {
+      source: 'image';
+      result: ImageCheckingResult;
+    }
+  | {
+      source: 'link';
+      result: LinkCheckingResult;
+    }
+  | {
+      source: 'compatibility';
+      result: CompatibilityCheckingResult;
+    };
+
+interface LinterProps {
+  rows: LintingRow[] | undefined;
+}
+
+export const useLinter = ({
+  markup,
+  reactMarkup,
+  emailPath,
+
+  initialRows,
+}: {
+  reactMarkup: string;
+  markup: string;
+  emailPath: string;
+
+  initialRows?: LintingRow[];
+}) => {
+  const [rows, setRows] = useState<LintingRow[] | undefined>(initialRows);
+
+  const sources = getLintingSources(
+    markup,
+    reactMarkup,
+    emailPath,
+    'location' in global
+      ? `${global.location.protocol}//${global.location.host}`
+      : '',
+  );
+
+  const [loading, setLoading] = useState(false);
+  const isStreaming = useRef(false);
+
+  const load = async () => {
+    if (isStreaming.current) return;
+    isStreaming.current = true;
+    setLoading(true);
+
+    setRows([]);
+    try {
+      let rows: LintingRow[] = [];
+      for await (const row of loadLintingRowsFrom(sources)) {
+        setRows((current) => {
+          if (!current) {
+            return [row];
+          }
+          const newArray = [...current, row];
+          newArray.sort((a, b) => {
+            if (a.result.status === 'error' && b.result.status === 'warning') {
+              return -1;
+            }
+
+            if (a.result.status === 'warning' && b.result.status === 'error') {
+              return 1;
+            }
+
+            return 0;
+          });
+          rows = newArray;
+          return newArray;
+        });
+      }
+      return rows;
+    } finally {
+      setLoading(false);
+      isStreaming.current = false;
+    }
+  };
+
+  return [rows, { loading, load }] as const;
+};
+
+export const Linter = ({ rows }: LinterProps) => {
+  if (rows === undefined) return null;
+
+  return (
+    <Results>
+      {rows.map((row, i) => {
+        if (row.source === 'link') {
+          const failingCheck = row.result.checks.find(
+            (check) => check.passed === false,
+          )!;
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 300 &&
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the content may have been moved'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The link is broken'
+                  : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The link is broken due to invalid syntax'
+                  : null}
+
+                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.link}
+                </span>
+              </Result.Description>
+              <Result.Metadata>
+                {failingCheck.type === 'fetch_attempt'
+                  ? failingCheck.metadata.fetchStatusCode
+                  : ''}
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        if (row.source === 'compatibility') {
+          const statsReportedNotWorking = Object.entries(
+            row.result.statsPerEmailClient,
+          ).filter(([, stats]) => stats.status === 'error');
+          const statsReportedPartiallyWorking = Object.entries(
+            row.result.statsPerEmailClient,
+          ).filter(([, stats]) => stats.status === 'warning');
+
+          const unsupportedClientsString = statsReportedNotWorking
+            .map(([emailClient]) => nicenames.family[emailClient])
+            .join(', ');
+          const partiallySupportedClientsString = statsReportedPartiallyWorking
+            .map(([emailClient]) => nicenames.family[emailClient])
+            .join(', ');
+
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{row.result.entry.title}</Result.Name>
+              <Result.Description>
+                {statsReportedNotWorking.length > 0
+                  ? `Not supported in ${unsupportedClientsString}`
+                  : null}
+                {statsReportedPartiallyWorking.length > 0 &&
+                statsReportedNotWorking.length > 0
+                  ? '. '
+                  : null}
+                {statsReportedPartiallyWorking.length > 0
+                  ? `Partially supported in ${partiallySupportedClientsString}`
+                  : null}
+              </Result.Description>
+              <Result.Metadata>
+                {row.result.location.start.line.toString().padStart(2, '0')}:
+                {row.result.location.start.column.toString().padStart(2, '0')}
+                <a
+                  href={row.result.entry.url}
+                  className="underline ml-2"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  See more info
+                </a>
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        if (row.source === 'image') {
+          const failingCheck = row.result.checks.find(
+            (check) => check.passed === false,
+          )!;
+          return (
+            <Result status={row.result.status} key={i}>
+              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Description>
+                {failingCheck.type === 'security'
+                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 300 &&
+                failingCheck.metadata.fetchStatusCode < 400
+                  ? 'There was a redirect, the image may have been moved'
+                  : null}
+                {failingCheck.type === 'fetch_attempt' &&
+                failingCheck.metadata.fetchStatusCode &&
+                failingCheck.metadata.fetchStatusCode >= 400
+                  ? 'The image is broken'
+                  : null}
+                {failingCheck.type === 'syntax'
+                  ? 'The image is broken due to an invalid source'
+                  : null}
+
+                {failingCheck.type === 'accessibility'
+                  ? 'Missing alt text'
+                  : null}
+
+                {failingCheck.type === 'image_size' &&
+                failingCheck.metadata.byteCount
+                  ? 'This image is too large, keep it under 1mb'
+                  : null}
+
+                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                  {row.result.source}
+                </span>
+              </Result.Description>
+              <Result.Metadata>
+                {row.result.checks
+                  .map((check) => {
+                    if (
+                      check.type === 'fetch_attempt' &&
+                      check.metadata.fetchStatusCode
+                    ) {
+                      return check.metadata.fetchStatusCode;
+                    }
+
+                    if (
+                      check.type === 'image_size' &&
+                      check.metadata.byteCount
+                    ) {
+                      return prettyBytes(check.metadata.byteCount);
+                    }
+
+                    return undefined;
+                  })
+                  .filter(Boolean)
+                  .join('—')}
+              </Result.Metadata>
+            </Result>
+          );
+        }
+
+        return undefined;
+      })}
+    </Results>
+  );
+};
+
+interface ResultProps extends React.ComponentProps<typeof Results.Row> {
+  status: 'error' | 'warning' | 'success';
+}
+
+const Result = ({ children, className, status, ...props }: ResultProps) => {
+  return (
+    <Results.Row
+      data-status={status}
+      {...props}
+      className={cn('group/result', className)}
+    >
+      {children}
+    </Results.Row>
+  );
+};
+
+Result.Name = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return (
+    <Results.Column {...props}>
+      <span className="flex uppercase gap-1 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
+        <IconWarning />
+        {children}
+      </span>
+    </Results.Column>
+  );
+};
+
+Result.Description = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return <Results.Column {...props}>{children}</Results.Column>;
+};
+
+Result.Metadata = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Results.Column>) => {
+  return (
+    <Results.Column
+      align="right"
+      {...props}
+      className={cn('font-mono text-slate-11', className)}
+    >
+      {children}
+    </Results.Column>
+  );
+};

package/src/components/toolbar/results.tsx

@@ -0,0 +1,48 @@
+import { cn } from '../../utils';
+
+export const Results = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'table'>) => {
+  return (
+    <table
+      className={cn(
+        'group relative w-full border-collapse text-left text-slate-10 text-xs',
+        className,
+      )}
+    >
+      <tbody>{children}</tbody>
+    </table>
+  );
+};
+
+Results.Row = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'tr'>) => {
+  return (
+    <tr
+      className={cn(
+        'border-collapse align-bottom border-slate-6 border-b',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+};
+
+Results.Column = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'td'>) => {
+  return (
+    <td className={cn('py-1 align-bottom font-medium', className)} {...props}>
+      {children}
+    </td>
+  );
+};

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

@@ -0,0 +1,144 @@
+import { useRef, 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;
+}
+
+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-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/toolbar-button.tsx

@@ -0,0 +1,50 @@
+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;
+}
+
+export const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  ...props
+}: ToolbarButtonProps) => {
+  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>
+  );
+};

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) {
+      try {
+        value = JSON.parse(storedValue) as T;
+      } catch (exception) {
+        console.warn(
+          'Failed to load stored value for',
+          key,
+          'with value',
+          value,
+        );
+      }
+    }
+  }
+
+  return [
+    useSyncExternalStore(
+      () => () => {},
+      () => value,
+      () => undefined,
+    ),
+    function setValue(newValue: T | undefined) {
+      if ('localStorage' in global) {
+        global.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+  ] as const;
+};