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

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>
+  );
+};

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

@@ -1,230 +1,107 @@
-import * as Collapsible from '@radix-ui/react-collapsible';
-import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
-import Lottie from 'lottie-react';
 import * as React from 'react';
 import {
   type LinkCheckingResult,
   checkLinks,
 } from '../../actions/email-validation/check-links';
-import animatedLoadIcon from '../../animated-icons-data/load.json';
-import { cn } from '../../utils';
 import { Button } from '../button';
+import { Result, ResultList, type ResultStatus } from './checking-results';
 
-const containerAnimation = {
-  hidden: { opacity: 0, y: 10 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.6, ease: 'easeOut', staggerChildren: 0.1 },
-  },
-};
-
-const childAnimation = {
-  hidden: { opacity: 0, y: 5 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.4, ease: 'easeOut' },
-  },
-};
-
-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 LinkCheckerProps {
-  emailSlug: string;
-  emailMarkup: string;
-}
-
-type ResultStatus = 'error' | 'warning' | 'success';
-
-interface CollapsibleTriggerProps {
-  count: number;
+interface LinkCheckerResultsProps {
   label: string;
-  variant: ResultStatus;
-  disabled?: boolean;
-}
-
-interface ResultSectionProps {
   status: ResultStatus;
-  label: string;
   results: LinkCheckingResult[];
-  open: boolean;
+
+  justLoadedIn: boolean;
 }
 
-const CollapsibleTrigger = ({
-  count,
+const LinkCheckerResults = ({
   label,
-  variant,
-  disabled,
-}: CollapsibleTriggerProps) => (
-  <Collapsible.Trigger
-    className={clsx(
-      'group flex w-full items-center gap-1 rounded p-2 transition-colors duration-200 ease-[cubic-bezier(.36,.66,.6,1)]',
-      statusStyles[variant],
-      disabled && 'cursor-not-allowed opacity-70',
-    )}
-    disabled={disabled}
-  >
-    <span
-      className={clsx(
-        '-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">
-      <span>{label}</span>
-      <span>({count})</span>
-    </div>
-  </Collapsible.Trigger>
-);
-
-const ResultSection = ({
   status,
-  label,
   results,
-  open,
-}: ResultSectionProps) => {
-  const isEmpty = results.length === 0;
-
-  return (
-    <Collapsible.Root className="group" defaultOpen={open && !isEmpty}>
-      <CollapsibleTrigger
-        count={results.length}
-        label={label}
-        variant={status}
-        disabled={isEmpty}
-      />
-      {!isEmpty && (
-        <Collapsible.Content>
-          <ol className="mt-2 mb-1 flex list-none flex-col gap-4">
-            {results.map((result, index) => (
-              <LinkResultView key={index} {...result} />
-            ))}
-          </ol>
-        </Collapsible.Content>
-      )}
-    </Collapsible.Root>
-  );
-};
-
-const LoadingButton = ({
-  loading,
-  onClick,
-  loadAnimation,
-  animatedLoadIcon,
-  children,
-}: any) => {
-  React.useEffect(() => {
-    if (loading) {
-      loadAnimation.current?.play();
-    }
-  }, [loading, loadAnimation]);
 
+  justLoadedIn,
+}: LinkCheckerResultsProps) => {
   return (
-    <Button
-      className="mt-2 mb-4 min-w-[5rem] transition-all disabled:border-transparent disabled:bg-slate-11"
-      disabled={loading}
-      onClick={onClick}
+    <ResultList
+      label={
+        <>
+          <span>{label}</span>
+          <span>({results.length})</span>
+        </>
+      }
+      defaultOpen={justLoadedIn}
+      status={status}
+      disabled={results.length === 0}
     >
-      <div className="flex items-center justify-center gap-2">
-        <span
-          className={cn(
-            '-ml-7 opacity-0 transition-opacity duration-200',
-            loading && 'opacity-100',
-          )}
-        >
-          <Lottie
-            animationData={animatedLoadIcon}
-            autoPlay={false}
-            className="h-5 w-5"
-            loop={true}
-            lottieRef={loadAnimation}
-          />
-        </span>
-        <span>{children}</span>
-      </div>
-    </Button>
+      {results.map(({ link, status, checks }) => (
+        <Result key={link} status={status}>
+          <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full"
+          >
+            <Result.Title>
+              <span className="block overflow-hidden truncate text-ellipsis whitespace-nowrap">
+                {link}
+              </span>
+            </Result.Title>
+            <Result.StatusDescription>
+              {checks
+                .map((check) => {
+                  if (check.type === 'syntax' && !check.passed)
+                    return 'Invalid URL';
+                  if (check.type === 'fetch_attempt')
+                    return `${check.metadata.fetchStatusCode}`;
+                  if (check.type === 'security')
+                    return check.passed ? 'Secure' : 'Insecure';
+                  return null;
+                })
+                .filter(Boolean)
+                .join(' - ')}
+            </Result.StatusDescription>
+          </a>
+        </Result>
+      ))}
+    </ResultList>
   );
 };
 
-const LinkResultView = (props: LinkCheckingResult) => (
-  <AnimatePresence mode="wait">
-    <motion.li
-      animate="visible"
-      className="group/item relative w-full rounded-md p-2 pl-4 transition-colors duration-300 ease-out hover:bg-slate-5"
-      data-status={props.status}
-      initial="hidden"
-      layout
-      variants={containerAnimation}
-    >
-      <a
-        href={props.link}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="w-full"
-      >
-        <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={childAnimation}
-        >
-          <span className="block overflow-hidden truncate text-ellipsis whitespace-nowrap">
-            {props.link}
-          </span>
-        </motion.div>
-        <motion.div
-          className="mt-1 font-semibold text-[.625rem] uppercase"
-          variants={childAnimation}
-        >
-          {props.checks
-            .map((check) => {
-              if (check.type === 'syntax' && !check.passed)
-                return 'Invalid URL';
-              if (check.type === 'fetch_attempt')
-                return `${check.metadata.fetchStatusCode}`;
-              if (check.type === 'security')
-                return check.passed ? 'Secure' : 'Insecure';
-              return null;
-            })
-            .filter(Boolean)
-            .join(' - ')}
-        </motion.div>
-      </a>
-    </motion.li>
-  </AnimatePresence>
-);
+interface LinkCheckerProps {
+  emailSlug: string;
+  emailMarkup: string;
+}
 
 export const LinkChecker = ({ emailSlug, emailMarkup }: LinkCheckerProps) => {
   const cacheKey = `link-checking-results-${emailSlug.replaceAll('/', '-')}`;
-  const cachedResults =
-    'localStorage' in window ? window.localStorage.getItem(cacheKey) : null;
 
   const [results, setResults] = React.useState<
     LinkCheckingResult[] | undefined
-  >(cachedResults ? JSON.parse(cachedResults) : undefined);
-  const [sectionsOpen, setSectionsOpen] = React.useState(false);
-  const loadAnimation = React.useRef(null);
+  >();
+
+  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);
+    checkLinks(emailMarkup)
+      .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],
@@ -238,39 +115,27 @@ export const LinkChecker = ({ emailSlug, emailMarkup }: LinkCheckerProps) => {
     [results],
   );
 
-  const handleRun = () => {
-    setLoading(true);
-    checkLinks(emailMarkup)
-      .then((newResults) => {
-        setResults(newResults);
-        setSectionsOpen(true);
-        localStorage.setItem(cacheKey, JSON.stringify(newResults));
-      })
-      .catch(console.error)
-      .finally(() => setLoading(false));
-  };
-
   return (
     <div className="mt-4 flex w-full flex-col gap-2 text-pretty">
       {results ? (
         <>
-          <ResultSection
+          <LinkCheckerResults
             label="Errors"
             results={errorResults}
+            justLoadedIn={justLoadedIn}
             status="error"
-            open={sectionsOpen}
           />
-          <ResultSection
+          <LinkCheckerResults
             label="Warnings"
             results={warningResults}
+            justLoadedIn={justLoadedIn}
             status="warning"
-            open={sectionsOpen}
           />
-          <ResultSection
+          <LinkCheckerResults
             label="Success"
             results={successResults}
+            justLoadedIn={justLoadedIn}
             status="success"
-            open={sectionsOpen}
           />
         </>
       ) : (
@@ -278,14 +143,9 @@ export const LinkChecker = ({ emailSlug, emailMarkup }: LinkCheckerProps) => {
           Check if all links are valid and redirect to the correct pages.
         </span>
       )}
-      <LoadingButton
-        loading={loading}
-        onClick={handleRun}
-        loadAnimation={loadAnimation}
-        animatedLoadIcon={animatedLoadIcon}
-      >
+      <Button loading={loading} onClick={handleRun}>
         {results ? 'Re-run' : 'Run'}
-      </LoadingButton>
+      </Button>
     </div>
   );
 };

package/src/components/sidebar/sidebar.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { clsx } from 'clsx';
 import { motion } from 'framer-motion';
-import Lottie from 'lottie-react';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import type * as React from 'react';
@@ -15,8 +15,10 @@ import { useIconAnimation } from '../../hooks/use-icon-animation';
 import { cn } from '../../utils';
 import { Button } from '../button';
 import { Heading } from '../heading';
+import { IconImage } from '../icons/icon-image';
 import { Tooltip } from '../tooltip';
 import { FileTree } from './file-tree';
+import { ImageChecker } from './image-checker';
 import { LinkChecker } from './link-checker';
 
 type SidebarPanelValue = 'file-tree' | 'link-checker' | 'image-checker';
@@ -145,7 +147,7 @@ const Panel = ({ title, active, children }: PanelProps) => (
         {title}
       </Heading>
     </div>
-    <div className="-mt-[.5px] relative h-[calc(100vh-4.375rem)] w-full border-slate-4 border-t px-4 pb-3">
+    <div className="-mt-[.5px] relative h-[calc(100dvh-4.375rem)] w-full border-slate-4 border-t px-4 pb-3">
       {children}
     </div>
   </>
@@ -218,12 +220,14 @@ export const Sidebar = ({
             tabValue="file-tree"
             tooltipText="File Explorer"
           >
-            <Lottie
-              animationData={animatedMailIcon as object}
-              autoPlay={false}
+            <DotLottieReact
+              data={animatedMailIcon}
+              autoplay={false}
               className="h-5 w-5"
               loop={false}
-              lottieRef={mailAnimation.ref}
+              dotLottieRefCallback={(instance) => {
+                mailAnimation.ref.current = instance;
+              }}
             />
           </TabTrigger>
           <TabTrigger
@@ -234,14 +238,24 @@ export const Sidebar = ({
             tabValue="link-checker"
             tooltipText="Link Checker"
           >
-            <Lottie
-              animationData={animatedLinkIcon as object}
-              autoPlay={false}
+            <DotLottieReact
+              data={animatedLinkIcon}
+              autoplay={false}
               className="h-6 w-6"
               loop={false}
-              lottieRef={linkAnimation.ref}
+              dotLottieRefCallback={(instance) => {
+                linkAnimation.ref.current = instance;
+              }}
             />
           </TabTrigger>
+          <TabTrigger
+            activeTabValue={activePanelValue}
+            className="relative"
+            tabValue="image-checker"
+            tooltipText="Image Checker"
+          >
+            <IconImage className="h-6 w-6" />
+          </TabTrigger>
           <div className="mt-auto flex flex-col">
             <NavigationButton
               className="flex items-center justify-center"
@@ -251,12 +265,14 @@ export const Sidebar = ({
               side="right"
               tooltip="Documentation"
             >
-              <Lottie
-                animationData={animatedHelpIcon as object}
-                autoPlay={false}
+              <DotLottieReact
+                data={animatedHelpIcon}
+                autoplay={false}
                 className="h-5 w-5"
                 loop={false}
-                lottieRef={helpAnimation.ref}
+                dotLottieRefCallback={(instance) => {
+                  helpAnimation.ref.current = instance;
+                }}
               />
             </NavigationButton>
             <NavigationButton
@@ -284,19 +300,28 @@ export const Sidebar = ({
                     emailSlug={currentEmailOpenSlug}
                   />
                 ) : (
-                  <div className="mt-4 flex w-full flex-col gap-2 text-pretty text-xs leading-relaxed">
-                    <div className="flex flex-col gap-1 rounded-lg border border-[#0BB9CD]/50 bg-[#0BB9CD]/20 text-white">
-                      <span className="mx-2.5 mt-2">
-                        To use the Link Checker, you need to select a template.
-                      </span>
-                      <Button
-                        className="mx-2 my-2.5 transition-all disabled:border-transparent disabled:bg-slate-11"
-                        onClick={() => setActivePanelValue('file-tree')}
-                      >
-                        Select a template
-                      </Button>
-                    </div>
-                  </div>
+                  <EmptyState
+                    title="Link Checker"
+                    onSelectTemplate={() => setActivePanelValue('file-tree')}
+                  />
+                )}
+              </Panel>
+            )}
+            {activePanelValue === 'image-checker' && (
+              <Panel
+                title="Image Checker"
+                active={activePanelValue === 'image-checker'}
+              >
+                {currentEmailOpenSlug && emailMarkup ? (
+                  <ImageChecker
+                    emailMarkup={emailMarkup}
+                    emailSlug={currentEmailOpenSlug}
+                  />
+                ) : (
+                  <EmptyState
+                    title="Image Checker"
+                    onSelectTemplate={() => setActivePanelValue('file-tree')}
+                  />
                 )}
               </Panel>
             )}
@@ -317,3 +342,26 @@ export const Sidebar = ({
     </Tabs.Root>
   );
 };
+
+interface EmptyStateProps {
+  onSelectTemplate: () => void;
+  title: string;
+}
+
+const EmptyState = ({ onSelectTemplate, title }: EmptyStateProps) => {
+  return (
+    <div className="mt-4 flex w-full flex-col gap-2 text-pretty text-xs leading-relaxed">
+      <div className="flex flex-col gap-1 rounded-lg border border-[#0BB9CD]/50 bg-[#0BB9CD]/20 text-white">
+        <span className="mx-2.5 mt-2">
+          To use the {title}, you need to select a template.
+        </span>
+        <Button
+          className="mx-2 my-2.5 transition-all disabled:border-transparent disabled:bg-slate-11"
+          onClick={() => onSelectTemplate()}
+        >
+          Select a template
+        </Button>
+      </div>
+    </div>
+  );
+};