npm - @react-email/preview-server - Versions diffs - 4.1.0-canary.9 → 4.1.0 - Mend

@react-email/preview-server 4.1.0-canary.9 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/scripts/utils/default-seed/marketing/changelog.tsx ADDED Viewed

@@ -0,0 +1,98 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+interface ChangelogProps {
+  receiver: string;
+  changes: Partial<Record<'features' | 'fixes' | 'improvements', string[]>>;
+  date: string;
+}
+interface ChangesProps {
+  title: React.ReactNode;
+  content: string[];
+}
+function Changes({ title, content }: ChangesProps) {
+  return (
+    <Section>
+      <Heading as="h2" className="my-[12px]">
+        {title}
+      </Heading>
+      <ul className="list-disc pl-6">
+        {content.map((feature, index) => (
+          <li key={index} className="mb-2">
+            {feature}
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}
+export default function Changelog({ receiver, date, changes }: ChangelogProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>
+            The changes as of {date} particularly tailored to you
+          </Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              Hello {receiver},
+            </Heading>
+            <Text>
+              We've been hard at work making improvements to our service, and we
+              wanted to share the latest changes as of{' '}
+              <span className="font-bold">{date}</span> with you.
+            </Text>
+            {changes.features && changes.features.length > 0 ? (
+              <Changes title="Features" content={changes.features} />
+            ) : null}
+            {changes.improvements && changes.improvements.length > 0 ? (
+              <Changes title="Improvements" content={changes.improvements} />
+            ) : null}
+            {changes.fixes && changes.fixes.length > 0 ? (
+              <Changes title="Fixes" content={changes.fixes} />
+            ) : null}
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+Changelog.PreviewProps = {
+  receiver: 'user',
+  changes: {
+    features: [
+      'Added a new feature to enhance user experience',
+      'Introduced a dark mode option for better accessibility',
+    ],
+    fixes: [
+      'Fixed a bug that caused the app to crash on startup',
+      'Resolved an issue with email notifications not being sent',
+    ],
+    improvements: [
+      'Improved performance of the application by optimizing database queries',
+      'Enhanced security measures to protect user data',
+    ],
+  },
+  date: 'June 4th, 2025',
+} satisfies ChangelogProps;

package/src/actions/email-validation/__snapshots__/check-images.spec.tsx.snap ADDED Viewed

@@ -0,0 +1,84 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`checkImages() 1`] = `
+[
+  {
+    "checks": [
+      {
+        "metadata": {
+          "alt": undefined,
+        },
+        "passed": false,
+        "type": "accessibility",
+      },
+      {
+        "passed": true,
+        "type": "syntax",
+      },
+      {
+        "passed": true,
+        "type": "security",
+      },
+      {
+        "metadata": {
+          "fetchStatusCode": 200,
+        },
+        "passed": true,
+        "type": "fetch_attempt",
+      },
+      {
+        "metadata": {
+          "byteCount": 26808,
+        },
+        "passed": true,
+        "type": "image_size",
+      },
+    ],
+    "codeLocation": {
+      "column": 3,
+      "line": 2,
+    },
+    "source": "https://resend.com/static/brand/resend-icon-white.png",
+    "status": "warning",
+  },
+  {
+    "checks": [
+      {
+        "metadata": {
+          "alt": "codepen challenges",
+        },
+        "passed": true,
+        "type": "accessibility",
+      },
+      {
+        "passed": true,
+        "type": "syntax",
+      },
+      {
+        "passed": true,
+        "type": "security",
+      },
+      {
+        "metadata": {
+          "fetchStatusCode": 200,
+        },
+        "passed": true,
+        "type": "fetch_attempt",
+      },
+      {
+        "metadata": {
+          "byteCount": 111922,
+        },
+        "passed": true,
+        "type": "image_size",
+      },
+    ],
+    "codeLocation": {
+      "column": 3,
+      "line": 3,
+    },
+    "source": "/static/codepen-challengers.png",
+    "status": "success",
+  },
+]
+`;

package/src/actions/email-validation/check-images.spec.tsx CHANGED Viewed

@@ -17,84 +17,5 @@ test('checkImages()', async () => {
       break;
     }
   }
-  expect(results).toEqual([
-    {
-      source: 'https://resend.com/static/brand/resend-icon-white.png',
-      codeLocation: {
-        line: 2,
-        column: 3,
-      },
-      checks: [
-        {
-          passed: false,
-          type: 'accessibility',
-          metadata: {
-            alt: undefined,
-          },
-        },
-        {
-          passed: true,
-          type: 'syntax',
-        },
-        {
-          passed: true,
-          type: 'security',
-        },
-        {
-          passed: true,
-          type: 'fetch_attempt',
-          metadata: {
-            fetchStatusCode: 200,
-          },
-        },
-        {
-          passed: true,
-          type: 'image_size',
-          metadata: {
-            byteCount: 23_138,
-          },
-        },
-      ],
-      status: 'warning',
-    },
-    {
-      codeLocation: {
-        line: 3,
-        column: 3,
-      },
-      checks: [
-        {
-          metadata: {
-            alt: 'codepen challenges',
-          },
-          passed: true,
-          type: 'accessibility',
-        },
-        {
-          passed: true,
-          type: 'syntax',
-        },
-        {
-          passed: true,
-          type: 'security',
-        },
-        {
-          metadata: {
-            fetchStatusCode: 200,
-          },
-          passed: true,
-          type: 'fetch_attempt',
-        },
-        {
-          metadata: {
-            byteCount: 111_922,
-          },
-          passed: true,
-          type: 'image_size',
-        },
-      ],
-      source: '/static/codepen-challengers.png',
-      status: 'success',
-    },
-  ] satisfies ImageCheckingResult[]);
+  expect(results).toMatchSnapshot();
 });

package/src/app/layout.tsx CHANGED Viewed

@@ -27,8 +27,8 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       className={`${inter.variable} ${sfMono.variable} font-sans`}
       lang="en"
     >
-      <body className="relative flex h-screen flex-col bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
-        <div className="bg-gradient-to-t from-slate-3 flex">
+      <body className="relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12">
+        <div className="bg-gradient-to-t from-slate-3 flex flex-col">
           <EmailsProvider
             initialEmailsDirectoryMetadata={emailsDirectoryMetadata}
           >

package/src/app/preview/[...slug]/preview.tsx CHANGED Viewed

@@ -162,7 +162,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                 width={width}
               >
                 <iframe
-                  className="solid max-h-full rounded-lg bg-white"
+                  className="max-h-full rounded-lg bg-white [color-scheme:auto]"
                   ref={(iframe) => {
                     if (iframe) {
                       return makeIframeDocumentBubbleEvents(iframe);

package/src/components/code-container.tsx CHANGED Viewed

@@ -37,6 +37,8 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
     });
   }
+  const codeId = React.useId();
   return (
     <div
       className="relative max-h-[650px] w-full h-full whitespace-pre rounded-md border border-slate-6 text-sm"
@@ -49,7 +51,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
     >
       <div className="h-9 border-b border-slate-6">
         <div className="flex">
-          <LayoutGroup id="code">
+          <LayoutGroup id={codeId}>
             {markups.map(({ language }) => {
               const isCurrentLang = activeLang === language;
               return (

package/src/components/code.tsx CHANGED Viewed

@@ -105,78 +105,79 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
           />
           <div
             ref={scrollerRef}
-            className="flex max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
+            className="max-h-[650px] h-full p-4 after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto"
           >
-            <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
-              {tokens.map((_, i) => (
-                <Link
-                  id={`L${i + 1}`}
-                  key={i}
-                  href={{
-                    hash: `#L${i + 1}`,
-                    search: searchParams.toString(),
-                  }}
-                  scroll={false}
-                  className={cn(
-                    'align-middle block scroll-mt-[325px] rounded-l-sm select-none pr-3 cursor-pointer hover:text-slate-12',
-                    isHighlighting(i + 1) &&
-                      'text-cyan-11 hover:text-cyan-11 bg-cyan-5',
-                  )}
-                  type="button"
-                >
-                  {i + 1}
-                </Link>
-              ))}
-            </div>
-            <pre>
+            <div className="grid grid-cols-[auto_1fr] w-full">
               {tokens.map((line, i) => {
                 const lineProps = getLineProps({
                   line,
                   key: i,
                 });
+                const isHighlighted = isHighlighting(i + 1);
+                const isHighlightStart = highlight && highlight[0] === i + 1;
+                const isHighlightEnd = highlight && highlight[1] === i + 1;
                 return (
-                  <div
-                    {...lineProps}
-                    className={cn(
-                      'whitespace-pre flex transition-colors rounded-r-sm',
-                      isHighlighting(i + 1) && 'bg-cyan-5',
-                      {
+                  <Fragment key={i}>
+                    {/* Line number cell */}
+                    <Link
+                      id={`L${i + 1}`}
+                      href={{
+                        hash: `#L${i + 1}`,
+                        search: searchParams.toString(),
+                      }}
+                      scroll={false}
+                      aria-selected={isHighlighted}
+                      className={cn(
+                        'text-[#49494f] relative text-[13px] font-light font-[MonoLisa,_Menlo,_monospace] align-middle scroll-mt-[325px] select-none pr-3 cursor-pointer hover:text-slate-12 transition-colors',
+                        'aria-selected:text-cyan-11 aria-selected:hover:text-cyan-11 aria-selected:bg-cyan-5 [&+*]:aria-selected:bg-cyan-5',
+                        isHighlightStart && 'rounded-tl-sm',
+                        isHighlightEnd && 'rounded-bl-sm',
+                      )}
+                      type="button"
+                    >
+                      {i + 1}
+                    </Link>
+                    {/* Code content cell */}
+                    <div
+                      {...lineProps}
+                      className={cn('whitespace-pre transition-colors', {
                         "before:mr-2 before:text-slate-11 before:content-['$']":
                           language === 'bash' && tokens.length === 1,
-                      },
-                    )}
-                    key={i}
-                  >
-                    {line.map((token, key) => {
-                      const tokenProps = getTokenProps({
-                        token,
-                      });
-                      const isException =
-                        token.content === 'from' &&
-                        line[key + 1]?.content === ':';
-                      const newTypes = isException
-                        ? [...token.types, 'key-white']
-                        : token.types;
-                      token.types = newTypes;
+                      })}
+                    >
+                      {line.map((token, key) => {
+                        const tokenProps = getTokenProps({
+                          token,
+                        });
+                        const isException =
+                          token.content === 'from' &&
+                          line[key + 1]?.content === ':';
+                        const newTypes = isException
+                          ? [...token.types, 'key-white']
+                          : token.types;
+                        token.types = newTypes;
-                      return (
-                        <Fragment key={key}>
-                          <span {...tokenProps} />
-                        </Fragment>
-                      );
-                    })}
-                  </div>
+                        return (
+                          <Fragment key={key}>
+                            <span {...tokenProps} />
+                          </Fragment>
+                        );
+                      })}
+                    </div>
+                  </Fragment>
                 );
               })}
-            </pre>
-            <div
-              className="absolute bottom-0 left-0 h-px w-[200px]"
-              style={{
-                background:
-                  'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
-              }}
-            />
+            </div>
           </div>
+          <div
+            className="absolute bottom-0 left-0 h-px w-[200px]"
+            style={{
+              background:
+                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+            }}
+          />
         </>
       )}
     </Highlight>