npm - @depup/react-email - Versions diffs - 5.2.10-depup.1 → 6.9.0-depup.1 - Mend

@depup/react-email 5.2.10-depup.1 → 6.9.0-depup.1

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 (404) hide show

package/src/components/section/section.spec.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { render } from '@react-email/render';
+import { Section } from './index.js';
+describe('<Section> component', () => {
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Section>Lorem ipsum</Section>);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$-->"`,
+    );
+  });
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Section>{testMessage}</Section>);
+    expect(html).toContain(testMessage);
+  });
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Section data-testid="section-test" style={style}>
+        Test
+      </Section>,
+    );
+    expect(html).toContain('style="background-color:red"');
+    expect(html).toContain('data-testid="section-test"');
+  });
+  it('renders with <td> wrapper if no <Column> is provided', async () => {
+    const actualOutput = await render(
+      <Section>
+        <div>Lorem ipsum</div>
+      </Section>,
+    );
+    expect(actualOutput).toContain('<td>');
+  });
+  it('renders with <td> wrapper if <Column> is provided', async () => {
+    const actualOutput = await render(
+      <Section>
+        <td>Lorem ipsum</td>
+      </Section>,
+    );
+    expect(actualOutput).toContain('<td>');
+  });
+  it('renders wrapping any child provided in a <td> tag', async () => {
+    const actualOutput = await render(
+      <Section>
+        <div>Lorem ipsum</div>
+        <p>Lorem ipsum</p>
+        <img alt="Lorem" src="lorem.ipsum" />
+      </Section>,
+    );
+    const tdChildrenArr = actualOutput.match(/<td\s*.*?>.*?<\/td>/g);
+    expect(tdChildrenArr).toHaveLength(1);
+  });
+});

package/src/components/section/section.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type SectionProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
+export const Section = React.forwardRef<HTMLTableElement, SectionProps>(
+  ({ children, style = {}, ...props }, ref) => {
+    // Split padding styles to improve compatibility with Klaviyo and Outlook,
+    // while preserving user-provided style property order without allocating
+    // entry arrays on each render.
+    const tdStyle: React.CSSProperties = {};
+    const tableStyle: React.CSSProperties = {};
+    const styleRecord = style as Record<string, unknown>;
+    for (const key in styleRecord) {
+      if (!Object.hasOwn(styleRecord, key)) {
+        continue;
+      }
+      const value = styleRecord[key];
+      if (
+        key === 'padding' ||
+        key === 'paddingTop' ||
+        key === 'paddingRight' ||
+        key === 'paddingBottom' ||
+        key === 'paddingLeft'
+      ) {
+        (tdStyle as Record<string, unknown>)[key] = value;
+      } else {
+        (tableStyle as Record<string, unknown>)[key] = value;
+      }
+    }
+    return (
+      <table
+        align="center"
+        width="100%"
+        border={0}
+        cellPadding="0"
+        cellSpacing="0"
+        role="presentation"
+        {...props}
+        ref={ref}
+        style={tableStyle}
+      >
+        <tbody>
+          <tr>
+            <td style={tdStyle}>{children}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  },
+);
+Section.displayName = 'Section';
+markAsElement(Section);

package/src/components/tailwind/e2e/integrations.spec.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import path from 'node:path';
+import shell from 'shelljs';
+const $ = (command: string, cwd: string = path.resolve(__dirname, '..')) => {
+  const executionResult = shell.exec(command, {
+    cwd,
+    fatal: true,
+    silent: true,
+  });
+  if (executionResult.code !== 0) {
+    process.stdout.write(executionResult.stderr);
+    process.stderr.write(executionResult.stderr);
+  }
+  expect(
+    executionResult.code,
+    `Expected command "${command}" to work properly but it returned a non-zero exit code`,
+  ).toBe(0);
+};
+describe('integrations', () => {
+  beforeAll(() => {
+    const packageLocation = path.resolve(__dirname, '../../../..');
+    $('yalc installations clean react-email', packageLocation);
+    $('yalc publish', packageLocation);
+  });
+  const integrationsLocation = __dirname;
+  test("Tailwind works on the Next App's build process", {
+    timeout: 65_000,
+  }, () => {
+    const nextAppLocation = path.resolve(integrationsLocation, 'nextjs');
+    $('npm install', nextAppLocation);
+    $('npm run build', nextAppLocation);
+  });
+  test("Tailwind works on the Vite App's build process", {
+    timeout: 15_000,
+  }, () => {
+    const viteAppLocation = path.resolve(integrationsLocation, 'vite');
+    $('npm install', viteAppLocation);
+    $('npm run build', viteAppLocation);
+  });
+});

package/src/components/tailwind/e2e/nextjs/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+This is a NextJS project bootstrapped with `create-next-app@latest` that contains a Tailwind
+email using most of the features we provide that will be auto-built on testing to
+make sure this new release works properly with the latest version of NextJS when being built.
+We do this testing so that things are more reliable and this couldn't be done using pnpm
+workspaces as they link code instead of actually copying the content into node_modules.
+The solution we use to copy the code in a way that mimics the actual `npm install @react-email/tailwind` is `yalc`.
+Se [the test file](../_tests/nextjs.spec.ts) for more info.

package/src/components/tailwind/e2e/nextjs/emails/vercel-invite-user.tsx ADDED Viewed

@@ -0,0 +1,151 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Tailwind,
+  Text,
+} from 'react-email';
+interface VercelInviteUserEmailProps {
+  username?: string;
+  userImage?: string;
+  invitedByUsername?: string;
+  invitedByEmail?: string;
+  teamName?: string;
+  teamImage?: string;
+  inviteLink?: string;
+  inviteFromIp?: string;
+  inviteFromLocation?: string;
+}
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : '';
+export const VercelInviteUserEmail = ({
+  username,
+  userImage,
+  invitedByUsername,
+  invitedByEmail,
+  teamName,
+  teamImage,
+  inviteLink,
+  inviteFromIp,
+  inviteFromLocation,
+}: VercelInviteUserEmailProps) => {
+  const previewText = `Join ${invitedByUsername} on Vercel`;
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white px-2 font-sans">
+          <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
+            <Section className="mt-[32px]">
+              <Img
+                src={`${baseUrl}/static/vercel-logo.png`}
+                width="40"
+                height="37"
+                alt="Vercel"
+                className="mx-auto my-0"
+              />
+            </Section>
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+              Join <strong>{teamName}</strong> on <strong>Vercel</strong>
+            </Heading>
+            <Text className="text-[14px] text-black leading-[24px]">
+              Hello {username},
+            </Text>
+            <Text className="text-[14px] text-black leading-[24px]">
+              <strong>{invitedByUsername}</strong> (
+              <Link
+                href={`mailto:${invitedByEmail}`}
+                className="text-blue-600 no-underline"
+              >
+                {invitedByEmail}
+              </Link>
+              ) has invited you to the <strong>{teamName}</strong> team on{' '}
+              <strong>Vercel</strong>.
+            </Text>
+            <Section>
+              <Row>
+                <Column align="right">
+                  <Img
+                    className="rounded-full"
+                    src={userImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+                <Column align="center">
+                  <Img
+                    src={`${baseUrl}/static/vercel-arrow.png`}
+                    width="12"
+                    height="9"
+                    alt="invited you to"
+                  />
+                </Column>
+                <Column align="left">
+                  <Img
+                    className="rounded-full"
+                    src={teamImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+              </Row>
+            </Section>
+            <Section className="mt-[32px] mb-[32px] text-center">
+              <Button
+                className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                href={inviteLink}
+              >
+                Join the team
+              </Button>
+            </Section>
+            <Text className="text-[14px] text-black leading-[24px]">
+              or copy and paste this URL into your browser:{' '}
+              <Link href={inviteLink} className="text-blue-600 no-underline">
+                {inviteLink}
+              </Link>
+            </Text>
+            <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
+            <Text className="text-[#666666] text-[12px] leading-[24px]">
+              This invitation was intended for{' '}
+              <span className="text-black">{username}</span>. This invite was
+              sent from <span className="text-black">{inviteFromIp}</span>{' '}
+              located in{' '}
+              <span className="text-black">{inviteFromLocation}</span>. If you
+              were not expecting this invitation, you can ignore this email. If
+              you are concerned about your account's safety, please reply to
+              this email to get in touch with us.
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+VercelInviteUserEmail.PreviewProps = {
+  username: 'alanturing',
+  userImage: `${baseUrl}/static/vercel-user.png`,
+  invitedByUsername: 'Alan',
+  invitedByEmail: 'alan.turing@example.com',
+  teamName: 'Enigma',
+  teamImage: `${baseUrl}/static/vercel-team.png`,
+  inviteLink: 'https://vercel.com/teams/invite/foo',
+  inviteFromIp: '204.13.186.218',
+  inviteFromLocation: 'São Paulo, Brazil',
+} as VercelInviteUserEmailProps;

package/src/components/tailwind/e2e/nextjs/next.config.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compress: false,
+};
+export default nextConfig;

package/src/components/tailwind/e2e/nextjs/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "name": "nextjs-with-tailwind",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "preinstall": "yalc add react-email"
+  },
+  "dependencies": {
+    "react-email": "file:.yalc/react-email",
+    "next": "^16",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "typescript": "^5",
+    "yalc": "1.0.0-pre.53"
+  }
+}

package/src/components/tailwind/e2e/nextjs/src/app/favicon.ico ADDED Viewed

Binary file

package/src/components/tailwind/e2e/nextjs/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+const inter = Inter({ subsets: ['latin'] });
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+const RootLayout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+};
+export default RootLayout;

package/src/components/tailwind/e2e/nextjs/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import { render } from 'react-email';
+import { VercelInviteUserEmail } from '../../emails/vercel-invite-user';
+export default async function Home() {
+  const emailHtml = await render(<VercelInviteUserEmail />);
+  return <div dangerouslySetInnerHTML={{ __html: emailHtml }} />;
+}

package/src/components/tailwind/e2e/nextjs/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "target": "ES2017"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/components/tailwind/e2e/vite/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+This is a Vite React project bootstrapped with `npm create vite@latest` that contains a Tailwind
+email using most of the features we provide that will be auto-built on testing to
+make sure this new release works properly with the latest version of Vite when being built.
+We do this testing so that things are more reliable before we get to publishing. This
+couldn't be done using pnpm workspaces as they link code instead of actually copying the content into node_modules.
+The solution we use to copy the code, in a way that mimics the actual `npm install @react-email/tailwind`, is `yalc`.
+Se [the test file](../_tests/vite.spec.ts) for more info.

package/src/components/tailwind/e2e/vite/emails/vercel-invite-user.tsx ADDED Viewed

@@ -0,0 +1,151 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Tailwind,
+  Text,
+} from 'react-email';
+interface VercelInviteUserEmailProps {
+  username?: string;
+  userImage?: string;
+  invitedByUsername?: string;
+  invitedByEmail?: string;
+  teamName?: string;
+  teamImage?: string;
+  inviteLink?: string;
+  inviteFromIp?: string;
+  inviteFromLocation?: string;
+}
+const baseUrl = import.meta.env.VERCEL_URL
+  ? `https://${import.meta.env.VERCEL_URL}`
+  : '';
+export const VercelInviteUserEmail = ({
+  username,
+  userImage,
+  invitedByUsername,
+  invitedByEmail,
+  teamName,
+  teamImage,
+  inviteLink,
+  inviteFromIp,
+  inviteFromLocation,
+}: VercelInviteUserEmailProps) => {
+  const previewText = `Join ${invitedByUsername} on Vercel`;
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white px-2 font-sans">
+          <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
+            <Section className="mt-[32px]">
+              <Img
+                src={`${baseUrl}/static/vercel-logo.png`}
+                width="40"
+                height="37"
+                alt="Vercel"
+                className="mx-auto my-0"
+              />
+            </Section>
+            <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
+              Join <strong>{teamName}</strong> on <strong>Vercel</strong>
+            </Heading>
+            <Text className="text-[14px] text-black leading-[24px]">
+              Hello {username},
+            </Text>
+            <Text className="text-[14px] text-black leading-[24px]">
+              <strong>{invitedByUsername}</strong> (
+              <Link
+                href={`mailto:${invitedByEmail}`}
+                className="text-blue-600 no-underline"
+              >
+                {invitedByEmail}
+              </Link>
+              ) has invited you to the <strong>{teamName}</strong> team on{' '}
+              <strong>Vercel</strong>.
+            </Text>
+            <Section>
+              <Row>
+                <Column align="right">
+                  <Img
+                    className="rounded-full"
+                    src={userImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+                <Column align="center">
+                  <Img
+                    src={`${baseUrl}/static/vercel-arrow.png`}
+                    width="12"
+                    height="9"
+                    alt="invited you to"
+                  />
+                </Column>
+                <Column align="left">
+                  <Img
+                    className="rounded-full"
+                    src={teamImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+              </Row>
+            </Section>
+            <Section className="mt-[32px] mb-[32px] text-center">
+              <Button
+                className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                href={inviteLink}
+              >
+                Join the team
+              </Button>
+            </Section>
+            <Text className="text-[14px] text-black leading-[24px]">
+              or copy and paste this URL into your browser:{' '}
+              <Link href={inviteLink} className="text-blue-600 no-underline">
+                {inviteLink}
+              </Link>
+            </Text>
+            <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" />
+            <Text className="text-[#666666] text-[12px] leading-[24px]">
+              This invitation was intended for{' '}
+              <span className="text-black">{username}</span>. This invite was
+              sent from <span className="text-black">{inviteFromIp}</span>{' '}
+              located in{' '}
+              <span className="text-black">{inviteFromLocation}</span>. If you
+              were not expecting this invitation, you can ignore this email. If
+              you are concerned about your account's safety, please reply to
+              this email to get in touch with us.
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+VercelInviteUserEmail.PreviewProps = {
+  username: 'alanturing',
+  userImage: `${baseUrl}/static/vercel-user.png`,
+  invitedByUsername: 'Alan',
+  invitedByEmail: 'alan.turing@example.com',
+  teamName: 'Enigma',
+  teamImage: `${baseUrl}/static/vercel-team.png`,
+  inviteLink: 'https://vercel.com/teams/invite/foo',
+  inviteFromIp: '204.13.186.218',
+  inviteFromLocation: 'São Paulo, Brazil',
+} as VercelInviteUserEmailProps;

package/src/components/tailwind/e2e/vite/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/components/tailwind/e2e/vite/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "vite-with-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preinstall": "yalc add react-email",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react-email": "file:.yalc/react-email",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.4",
+    "typescript": "^5.2.2",
+    "vite": "^7.3.1",
+    "yalc": "1.0.0-pre.53"
+  }
+}

package/src/components/tailwind/e2e/vite/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/components/tailwind/e2e/vite/src/App.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { render } from 'react-email';
+import { VercelInviteUserEmail } from '../emails/vercel-invite-user';
+function App() {
+  const emailHtml = render(<VercelInviteUserEmail />);
+  return <div dangerouslySetInnerHTML={{ __html: emailHtml }} />;
+}
+export default App;

package/src/components/tailwind/e2e/vite/src/main.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/components/tailwind/e2e/vite/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />