react-email 4.0.0-alpha.0 → 4.0.0-alpha.1

package/src/components/sidebar/checking-results.tsx

@@ -0,0 +1,150 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentProps } from 'react';
+import { cn } from '../../utils';
+
+export type ResultStatus = 'error' | 'warning' | 'success';
+
+const statusStyles = {
+  error: 'text-red-600 hover:bg-red-600/10',
+  warning: 'text-yellow-300 hover:bg-yellow-400/10',
+  success: 'text-green-600 hover:bg-green-600/10',
+};
+
+interface ResultListProps {
+  status: ResultStatus;
+  label: React.ReactNode;
+
+  disabled?: boolean;
+  defaultOpen?: boolean;
+
+  children: React.ReactNode;
+}
+
+export const ResultList = ({
+  status,
+  label,
+
+  disabled,
+  defaultOpen,
+
+  children,
+}: ResultListProps) => {
+  return (
+    <Collapsible.Root className="group" defaultOpen={defaultOpen && !disabled}>
+      <Collapsible.Trigger
+        className={cn(
+          'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+          statusStyles[status],
+          disabled && 'cursor-not-allowed opacity-70',
+        )}
+        disabled={disabled}
+      >
+        <span
+          className={cn(
+            '-mt-[.125rem] transition-transform duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
+            'rotate-0 group-data-[state=open]:rotate-90',
+          )}
+        >
+          <svg
+            fill="none"
+            height="15"
+            viewBox="0 0 15 15"
+            width="15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clipRule="evenodd"
+              d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div className="flex flex-1 items-center gap-1 font-bold text-[.625rem] uppercase tracking-wide">
+          {label}
+        </div>
+      </Collapsible.Trigger>
+      {children ? (
+        <Collapsible.Content>
+          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
+            {children}
+          </ol>
+        </Collapsible.Content>
+      ) : null}
+    </Collapsible.Root>
+  );
+};
+
+type ResultProps = {
+  status: ResultStatus;
+} & ComponentProps<typeof motion.li>;
+
+const resultAnimation = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
+  },
+};
+
+export const Result = ({ children, status, ...rest }: ResultProps) => {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.li
+        data-status={status}
+        initial="hidden"
+        layout
+        variants={resultAnimation}
+        animate="visible"
+        {...rest}
+        className={cn(
+          'group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5',
+          rest.className,
+        )}
+      >
+        {children}
+      </motion.li>
+    </AnimatePresence>
+  );
+};
+
+const titleStatusAnimation = {
+  hidden: { opacity: 0, y: 5 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' },
+  },
+};
+
+interface ResultStatusDescriptionProps {
+  children: React.ReactNode;
+}
+
+Result.StatusDescription = ({ children }: ResultStatusDescriptionProps) => {
+  return (
+    <motion.div
+      className="mt-1 font-semibold text-[.625rem] uppercase"
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+interface ResultTitleProps {
+  children: React.ReactNode;
+}
+
+Result.Title = ({ children }: ResultTitleProps) => {
+  return (
+    <motion.div
+      className="flex w-full items-center gap-2 text-xs group-data-[status=error]/item:text-red-400 group-data-[status=success]/item:text-green-400 group-data-[status=warning]/item:text-yellow-300 "
+      variants={titleStatusAnimation}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -3,7 +3,6 @@ import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
-import { emailsDirectoryAbsolutePath } from '../../utils/emails-directory-absolute-path';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
 import { FileTreeDirectory } from './file-tree-directory';
@@ -15,15 +14,13 @@ export const FileTreeDirectoryChildren = (props: {
   isRoot?: boolean;
 }) => {
   const searchParams = useSearchParams();
-  const isBaseEmailsDirectory =
-    props.emailsDirectoryMetadata.absolutePath === emailsDirectoryAbsolutePath;
 
   return (
     <AnimatePresence initial={false}>
       {props.open ? (
         <Collapsible.Content
           asChild
-          className="relative data-[root=true]:mt-2 overflow-y-hidden pl-1"
+          className="relative overflow-y-hidden pl-1"
           forceMount
         >
           <motion.div
@@ -34,7 +31,7 @@ export const FileTreeDirectoryChildren = (props: {
             {props.isRoot ? null : (
               <div className="line absolute left-2.5 h-full w-px bg-slate-6" />
             )}
-            <div className="data-[root=true]:py-2 flex flex-col truncate">
+            <div className="flex flex-col truncate">
               <LayoutGroup id="sidebar">
                 {props.emailsDirectoryMetadata.subDirectories.map(
                   (subDirectory) => (
@@ -48,7 +45,7 @@ export const FileTreeDirectoryChildren = (props: {
                 )}
                 {props.emailsDirectoryMetadata.emailFilenames.map(
                   (emailFilename, index) => {
-                    const emailSlug = isBaseEmailsDirectory
+                    const emailSlug = props.isRoot
                       ? emailFilename
                       : `${props.emailsDirectoryMetadata.relativePath}/${emailFilename}`;
 

package/src/components/sidebar/image-checker.tsx

@@ -0,0 +1,161 @@
+import prettyBytes from 'pretty-bytes';
+import * as React from 'react';
+import {
+  type ImageCheckingResult,
+  checkImages,
+} from '../../actions/email-validation/check-images';
+import { Button } from '../button';
+import { Result, ResultList, type ResultStatus } from './checking-results';
+
+interface ImageCheckerResultsProps {
+  label: string;
+  status: ResultStatus;
+  results: ImageCheckingResult[];
+
+  justLoadedIn: boolean;
+}
+
+const ImageCheckerResults = ({
+  label,
+  status,
+  results,
+
+  justLoadedIn,
+}: ImageCheckerResultsProps) => {
+  return (
+    <ResultList
+      label={
+        <>
+          <span>{label}</span>
+          <span>({results.length})</span>
+        </>
+      }
+      defaultOpen={justLoadedIn}
+      status={status}
+      disabled={results.length === 0}
+    >
+      {results.map(({ source, status, checks }) => (
+        <Result className="flex gap-2" key={source} status={status}>
+          <img
+            width="24px"
+            className="my-auto rounded-sm"
+            src={source}
+            // biome-ignore lint/a11y/noRedundantAlt: The word image does fit in with the context and thus is not redundant
+            alt="image checked"
+          />
+          <div className="flex w-[calc(100%-.5rem-24px)] flex-col">
+            <Result.Title>
+              <span className="block overflow-hidden truncate text-ellipsis whitespace-nowrap">
+                {source}
+              </span>
+            </Result.Title>
+            <Result.StatusDescription>
+              {checks
+                .map((check) => {
+                  if (check.type === 'syntax' && !check.passed)
+                    return 'Invalid URL';
+                  if (check.type === 'accessibility' && !check.passed)
+                    return 'Missing alt';
+                  if (check.type === 'security')
+                    return check.passed ? 'Secure' : 'Insecure';
+                  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 null;
+                })
+                .filter(Boolean)
+                .join(' - ')}
+            </Result.StatusDescription>
+          </div>
+        </Result>
+      ))}
+    </ResultList>
+  );
+};
+
+interface ImageCheckerProps {
+  emailSlug: string;
+  emailMarkup: string;
+}
+
+export const ImageChecker = ({ emailSlug, emailMarkup }: ImageCheckerProps) => {
+  const cacheKey = `image-checking-results-${emailSlug.replaceAll('/', '-')}`;
+
+  const [results, setResults] = React.useState<
+    ImageCheckingResult[] | undefined
+  >();
+
+  React.useEffect(() => {
+    const cachedValue =
+      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
+    if (cachedValue) {
+      setResults(JSON.parse(cachedValue));
+    }
+  }, [cacheKey]);
+
+  const [justLoadedIn, setJustLoadedIn] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  const handleRun = () => {
+    setLoading(true);
+    checkImages(emailMarkup, `${location.protocol}//${location.host}`)
+      .then((newResults) => {
+        setResults(newResults);
+        setJustLoadedIn(true);
+        localStorage.setItem(cacheKey, JSON.stringify(newResults));
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  };
+
+  const errorResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'error') || [],
+    [results],
+  );
+  const warningResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'warning') || [],
+    [results],
+  );
+  const successResults = React.useMemo(
+    () => results?.filter((r) => r.status === 'success') || [],
+    [results],
+  );
+
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
+      {results ? (
+        <>
+          <ImageCheckerResults
+            label="Errors"
+            results={errorResults}
+            justLoadedIn={justLoadedIn}
+            status="error"
+          />
+          <ImageCheckerResults
+            label="Warnings"
+            results={warningResults}
+            justLoadedIn={justLoadedIn}
+            status="warning"
+          />
+          <ImageCheckerResults
+            label="Success"
+            results={successResults}
+            justLoadedIn={justLoadedIn}
+            status="success"
+          />
+        </>
+      ) : (
+        <span className="text-xs leading-relaxed">
+          Check if all links are valid and redirect to the correct pages.
+        </span>
+      )}
+      <Button loading={loading} onClick={handleRun}>
+        {results ? 'Re-run' : 'Run'}
+      </Button>
+    </div>
+  );
+};