react-email 4.0.16 → 4.1.0-canary.10

package/src/components/toolbar/compatibility.tsx

@@ -1,113 +0,0 @@
-import { useRef, useState } from 'react';
-import { toast } from 'sonner';
-import { nicenames } from '../../actions/email-validation/caniemail-data';
-import {
-  type CompatibilityCheckingResult,
-  checkCompatibility,
-} from '../../actions/email-validation/check-compatibility';
-import { sanitize } from '../../utils';
-import { loadStream } from '../../utils/load-stream';
-import { IconWarning } from '../icons/icon-warning';
-import { CodePreviewLineLink } from './code-preview-line-link';
-import { Results } from './results';
-
-export const useCompatibility = ({
-  reactMarkup,
-  emailPath,
-
-  initialResults,
-}: {
-  reactMarkup: string;
-  emailPath: string;
-
-  initialResults?: CompatibilityCheckingResult[];
-}) => {
-  const [results, setResults] = useState(initialResults);
-
-  const [loading, setLoading] = useState(false);
-  const isLoadingRef = useRef(false);
-
-  const load = async () => {
-    if (isLoadingRef.current) return;
-    isLoadingRef.current = true;
-    setLoading(true);
-
-    setResults([]);
-    let rawResults: CompatibilityCheckingResult[] = [];
-
-    try {
-      const stream = await checkCompatibility(reactMarkup, emailPath);
-      for await (const result of loadStream(stream)) {
-        if (result.status !== 'error') continue;
-        setResults((current) => {
-          if (!current) {
-            return [result];
-          }
-          rawResults = [...current, result];
-          return rawResults;
-        });
-      }
-    } catch (exception) {
-      console.error(exception);
-      toast.error(JSON.stringify(exception));
-    } finally {
-      setLoading(false);
-      isLoadingRef.current = false;
-    }
-
-    return rawResults;
-  };
-
-  return [results, { loading, load }] as const;
-};
-
-interface CompatibilityProps {
-  results: CompatibilityCheckingResult[] | undefined;
-}
-
-export const Compatibility = ({ results }: CompatibilityProps) => {
-  return (
-    <Results>
-      {results?.map((result, i) => {
-        const statsReportedNotWorking = Object.entries(
-          result.statsPerEmailClient,
-        ).filter(([, stats]) => stats.status === 'error');
-        const unsupportedClientsString = statsReportedNotWorking
-          .map(([emailClient]) => nicenames.family[emailClient])
-          .join(', ');
-
-        return (
-          <Results.Row key={i}>
-            <Results.Column>
-              <span className="flex text-red-400 uppercase gap-2 items-center">
-                <IconWarning />
-                {sanitize(result.entry.title)}
-              </span>
-            </Results.Column>
-            <Results.Column>
-              {statsReportedNotWorking.length > 0
-                ? `Not supported in ${unsupportedClientsString}`
-                : null}
-
-              <a
-                href={result.entry.url}
-                className="underline ml-2 decoration-slate-9 decoration-1 hover:decoration-slate-11 transition-colors hover:text-slate-12"
-                rel="noreferrer"
-                target="_blank"
-              >
-                More ↗
-              </a>
-            </Results.Column>
-            <Results.Column className="font-mono text-slate-11 text-right">
-              <CodePreviewLineLink
-                line={result.location.start.line}
-                column={result.location.start.column}
-                type="react"
-              />
-            </Results.Column>
-          </Results.Row>
-        );
-      })}
-    </Results>
-  );
-};

package/src/components/toolbar/linter.tsx

@@ -1,278 +0,0 @@
-import prettyBytes from 'pretty-bytes';
-import { Children, useRef, useState } from 'react';
-import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
-import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
-import { cn, sanitize } from '../../utils';
-import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
-import { IconWarning } from '../icons/icon-warning';
-import { CodePreviewLineLink } from './code-preview-line-link';
-import { Results } from './results';
-
-export type LintingRow =
-  | {
-      source: 'image';
-      result: ImageCheckingResult;
-    }
-  | {
-      source: 'link';
-      result: LinkCheckingResult;
-    };
-
-interface LinterProps {
-  rows: LintingRow[] | undefined;
-}
-
-export const useLinter = ({
-  markup,
-
-  initialRows,
-}: {
-  markup: string;
-
-  initialRows?: LintingRow[];
-}) => {
-  const [rows, setRows] = useState<LintingRow[] | undefined>(initialRows);
-
-  const sources = getLintingSources(
-    markup,
-    '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,
-          )!;
-          const metadata: React.ReactNode[] = [];
-          for (const check of row.result.checks) {
-            if (
-              check.type === 'fetch_attempt' &&
-              check.metadata.fetchStatusCode
-            ) {
-              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
-            }
-          }
-          metadata.push(
-            <CodePreviewLineLink
-              line={row.result.codeLocation.line}
-              column={row.result.codeLocation.column}
-              type="html"
-            />,
-          );
-          return (
-            <Result status={row.result.status} key={i}>
-              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
-              <Result.Description>
-                {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS instead 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 === 'fetch_attempt' &&
-                failingCheck.metadata.fetchStatusCode === undefined
-                  ? 'The link could not be reached'
-                  : null}
-                {failingCheck.type === 'syntax'
-                  ? 'The link is broken due to invalid syntax'
-                  : null}
-
-                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
-                  {row.result.link}
-                </span>
-              </Result.Description>
-              <Result.Metadata>{metadata}</Result.Metadata>
-            </Result>
-          );
-        }
-
-        if (row.source === 'image') {
-          const failingCheck = row.result.checks.find(
-            (check) => check.passed === false,
-          )!;
-          const metadata: React.ReactNode[] = [];
-          for (const check of row.result.checks) {
-            if (check.type === 'image_size' && check.metadata.byteCount) {
-              metadata.push(prettyBytes(check.metadata.byteCount));
-            }
-            if (
-              check.type === 'fetch_attempt' &&
-              check.metadata.fetchStatusCode
-            ) {
-              metadata.push(<>HTTP {check.metadata.fetchStatusCode}</>);
-            }
-          }
-          metadata.push(
-            <CodePreviewLineLink
-              line={row.result.codeLocation.line}
-              column={row.result.codeLocation.column}
-              type="html"
-            />,
-          );
-          return (
-            <Result status={row.result.status} key={i}>
-              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
-              <Result.Description>
-                {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS instead 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 === 'fetch_attempt' &&
-                failingCheck.metadata.fetchStatusCode === undefined
-                  ? 'The image could not be reached'
-                  : 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="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
-                  {row.result.source}
-                </span>
-              </Result.Description>
-              <Result.Metadata>{metadata}</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-2 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
-        <IconWarning />
-        {typeof children === 'string' ? sanitize(children) : children}
-      </span>
-    </Results.Column>
-  );
-};
-
-Result.Description = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof Results.Column>) => {
-  return <Results.Column {...props}>{children}</Results.Column>;
-};
-
-interface MetadatProps extends React.ComponentProps<typeof Results.Column> {
-  children: React.ReactNode[];
-}
-
-Result.Metadata = ({ children, className, ...props }: MetadatProps) => {
-  return (
-    <Results.Column
-      align="right"
-      {...props}
-      className={cn('font-mono text-slate-11', className)}
-    >
-      {Children.map(children, (child, index) => {
-        return (
-          <>
-            {index > 0 ? ' · ' : null}
-            {child}
-          </>
-        );
-      })}
-    </Results.Column>
-  );
-};

package/src/components/toolbar/results.tsx

@@ -1,51 +0,0 @@
-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-sm',
-        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 last:border-b-0',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-};
-
-Results.Column = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'td'>) => {
-  return (
-    <td
-      className={cn('py-1.5 align-bottom font-regular', className)}
-      {...props}
-    >
-      {children}
-    </td>
-  );
-};

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

@@ -1,155 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;
-};