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

@depup/react-email 5.2.10-depup.0 → 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/hr/hr.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type HrProps = Readonly<React.ComponentPropsWithoutRef<'hr'>>;
+export const Hr = React.forwardRef<HTMLHRElement, HrProps>(
+  ({ style, ...props }, ref) => (
+    <hr
+      {...props}
+      ref={ref}
+      style={{
+        width: '100%',
+        border: 'none',
+        borderColor: 'transparent',
+        borderTop: '1px solid #eaeaea',
+        ...style,
+      }}
+    />
+  ),
+);
+Hr.displayName = 'Hr';
+markAsElement(Hr);

package/src/components/hr/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './hr.js';

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

@@ -0,0 +1,26 @@
+import { render } from '@react-email/render';
+import { Html } from './index.js';
+describe('<Html> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Html>{testMessage}</Html>);
+    expect(html).toContain(testMessage);
+  });
+  it('passes props correctly', async () => {
+    const html = await render(
+      <Html data-testid="html-test" dir="rtl" lang="fr" />,
+    );
+    expect(html).toContain('lang="fr"');
+    expect(html).toContain('dir="rtl"');
+    expect(html).toContain('data-testid="html-test"');
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Html />);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head></head><!--$--><!--html--><!--/$--></html>"`,
+    );
+  });
+});

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type HtmlProps = Readonly<React.ComponentPropsWithoutRef<'html'>>;
+export const Html = React.forwardRef<HTMLHtmlElement, HtmlProps>(
+  ({ children, lang = 'en', dir = 'ltr', ...props }, ref) => (
+    <html {...props} dir={dir} lang={lang} ref={ref}>
+      {children}
+    </html>
+  ),
+);
+Html.displayName = 'Html';

package/src/components/html/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './html.js';

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

@@ -0,0 +1,30 @@
+import { render } from '@react-email/render';
+import { Img } from './index.js';
+describe('<Img> component', () => {
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red', border: 'solid 1px black' };
+    const html = await render(
+      <Img
+        alt="Cat"
+        data-testid="img-test"
+        height="300"
+        src="cat.jpg"
+        style={style}
+        width="300"
+      />,
+    );
+    expect(html).toContain('background-color:red');
+    expect(html).toContain('border:solid 1px black');
+    expect(html).toContain('data-testid="img-test"');
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(
+      <Img alt="Cat" height="300" src="cat.jpg" width="300" />,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><img alt="Cat" height="300" src="cat.jpg" style="display:block;outline:none;border:none;text-decoration:none" width="300"/><!--/$-->"`,
+    );
+  });
+});

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type ImgProps = Readonly<React.ComponentPropsWithoutRef<'img'>>;
+export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
+  ({ alt, src, width, height, style, ...props }, ref) => (
+    <img
+      {...props}
+      alt={alt ?? ''}
+      height={height}
+      ref={ref}
+      src={src}
+      style={{
+        display: 'block',
+        outline: 'none',
+        border: 'none',
+        textDecoration: 'none',
+        ...style,
+      }}
+      width={width}
+    />
+  ),
+);
+Img.displayName = 'Img';
+markAsElement(Img);

package/src/components/img/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './img.js';

package/src/components/index.ts ADDED Viewed

@@ -0,0 +1,19 @@
+export * from './body/index.js';
+export * from './button/index.js';
+export * from './code-block/index.js';
+export * from './code-inline/index.js';
+export * from './column/index.js';
+export * from './container/index.js';
+export * from './font/index.js';
+export * from './head/index.js';
+export * from './heading/index.js';
+export * from './hr/index.js';
+export * from './html/index.js';
+export * from './img/index.js';
+export * from './link/index.js';
+export * from './markdown/index.js';
+export * from './preview/index.js';
+export * from './row/index.js';
+export * from './section/index.js';
+export * from './tailwind/index.js';
+export * from './text/index.js';

package/src/components/link/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './link.js';

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

@@ -0,0 +1,37 @@
+import { render } from '@react-email/render';
+import { Link } from './index.js';
+describe('<Link> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(
+      <Link href="https://example.com">{testMessage}</Link>,
+    );
+    expect(html).toContain(testMessage);
+  });
+  it('passes style and other props correctly', async () => {
+    const style = { color: 'red' };
+    const html = await render(
+      <Link data-testid="link-test" href="https://example.com" style={style}>
+        Test
+      </Link>,
+    );
+    expect(html).toContain('color:red');
+    expect(html).toContain('data-testid="link-test"');
+  });
+  it('opens in a new tab', async () => {
+    const html = await render(<Link href="https://example.com">Test</Link>);
+    expect(html).toContain(`target="_blank"`);
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(
+      <Link href="https://example.com">Example</Link>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><a href="https://example.com" style="color:#067df7;text-decoration-line:none" target="_blank">Example</a><!--/$-->"`,
+    );
+  });
+});

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type LinkProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ target = '_blank', style, ...props }, ref) => (
+    <a
+      {...props}
+      ref={ref}
+      style={{
+        color: '#067df7',
+        textDecorationLine: 'none',
+        ...style,
+      }}
+      target={target}
+    >
+      {props.children}
+    </a>
+  ),
+);
+Link.displayName = 'Link';
+markAsElement(Link);

package/src/components/markdown/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './markdown.js';

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

@@ -0,0 +1,221 @@
+import { render } from '@react-email/render';
+import { Markdown } from './markdown.js';
+describe('<Markdown> component renders correctly', () => {
+  it('renders the markdown in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`# Markdown Test Document
+This is a **test document** to check the capabilities of a Markdown parser.
+## Headings
+### Third-Level Heading
+#### Fourth-Level Heading
+##### Fifth-Level Heading
+###### Sixth-Level Heading
+## Text Formatting
+This is some **bold text** and this is some *italic text*. You can also use ~~strikethrough~~ and \`inline code\`.
+## Lists
+1. Ordered List Item 1
+2. Ordered List Item 2
+3. Ordered List Item 3
+- Unordered List Item 1
+- Unordered List Item 2
+- Unordered List Item 3
+## Links
+[Markdown Guide](https://www.markdownguide.org)
+## Images
+![Markdown Logo](https://markdown-here.com/img/icon256.png)
+## Blockquotes
+> This is a blockquote.
+> - Author
+## Code Blocks
+\`\`\`javascript
+function greet(name) {
+console.log(\`Hello, $\{name}!\`);
+}
+\`\`\``}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Markdown Test Document</h1><p>This is a <strong style="font-weight:bold">test document</strong> to check the capabilities of a Markdown parser.</p>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Headings</h2><h3 style="font-weight:500;padding-top:20px;font-size:1.75rem">Third-Level Heading</h3><h4 style="font-weight:500;padding-top:20px;font-size:1.5rem">Fourth-Level Heading</h4><h5 style="font-weight:500;padding-top:20px;font-size:1.25rem">Fifth-Level Heading</h5><h6 style="font-weight:500;padding-top:20px;font-size:1rem">Sixth-Level Heading</h6><h2 style="font-weight:500;padding-top:20px;font-size:2rem">Text Formatting</h2><p>This is some <strong style="font-weight:bold">bold text</strong> and this is some <em style="font-style:italic">italic text</em>. You can also use <del>strikethrough</del> and <code style="color:#212529;font-size:87.5%;display:inline;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;word-wrap:break-word">inline code</code>.</p>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Lists</h2><ol>
+      <li>Ordered List Item 1</li>
+      <li>Ordered List Item 2</li>
+      <li>Ordered List Item 3</li>
+      </ol>
+      <ul>
+      <li>Unordered List Item 1</li>
+      <li>Unordered List Item 2</li>
+      <li>Unordered List Item 3</li>
+      </ul>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Links</h2><p><a href="https://www.markdownguide.org" target="_blank" style="color:#007bff;text-decoration:underline;background-color:transparent">Markdown Guide</a></p>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Images</h2><p><img src="https://markdown-here.com/img/icon256.png" alt="Markdown Logo"></p>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Blockquotes</h2><blockquote style="background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:1em 10px">
+      <p>This is a blockquote.</p>
+      <ul>
+      <li>Author</li>
+      </ul>
+      </blockquote>
+      <h2 style="font-weight:500;padding-top:20px;font-size:2rem">Code Blocks</h2><pre style="color:#212529;font-size:87.5%;display:block;background: #f8f8f8;font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:1px;margin-bottom:20px;word-wrap:break-word"><code>function greet(name) {
+      console.log(\`Hello, \${name}!\`);
+      }
+      </code></pre>
+      </div><!--/$-->"
+    `);
+  });
+  it('renders the headers in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`
+# Heading 1!
+## Heading 2!
+### Heading 3!
+#### Heading 4!
+##### Heading 5!
+###### Heading 6!
+       `}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Heading 1!</h1><h2 style="font-weight:500;padding-top:20px;font-size:2rem">Heading 2!</h2><h3 style="font-weight:500;padding-top:20px;font-size:1.75rem">Heading 3!</h3><h4 style="font-weight:500;padding-top:20px;font-size:1.5rem">Heading 4!</h4><h5 style="font-weight:500;padding-top:20px;font-size:1.25rem">Heading 5!</h5><h6 style="font-weight:500;padding-top:20px;font-size:1rem">Heading 6!</h6></div><!--/$-->"`,
+    );
+  });
+  it('renders text in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown
+        markdownCustomStyles={{
+          bold: {
+            font: '700 23px / 32px "Roobert PRO", system-ui, sans-serif',
+            background: 'url("path/to/image")',
+          },
+        }}
+      >
+        **This is sample bold text in markdown** and *this is italic text*
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px &quot;Roobert PRO&quot;, system-ui, sans-serif;background:url(&quot;path/to/image&quot;)">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
+      </div><!--/$-->"
+    `);
+  });
+  it('renders links in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>Link to [React-email](https://react.email)</Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p>Link to <a href="https://react.email" target="_blank" style="color:#007bff;text-decoration:underline;background-color:transparent">React-email</a></p>
+      </div><!--/$-->"
+    `);
+  });
+  it('escapes double quotes in link/image href and title attributes', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`[guide](https://example.com/?q="a" 'The "Complete" Guide') and ![logo](https://cdn.example.com/a.png 'Acme "logo"')`}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><a href="https://example.com/?q=&quot;a&quot;" target="_blank" title="The &quot;Complete&quot; Guide" style="color:#007bff;text-decoration:underline;background-color:transparent">guide</a> and <img src="https://cdn.example.com/a.png" alt="logo" title="Acme &quot;logo&quot;"></p>
+      </div><!--/$-->"
+    `);
+  });
+  it('renders lists in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`
+# Below is a list
+- Item One
+- Item Two
+- Item Three
+       `}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Below is a list</h1><ul>
+      <li>Item One</li>
+      <li>Item Two</li>
+      <li>Item Three</li>
+      </ul>
+      </div><!--/$-->"
+    `);
+  });
+  it('renders loose lists with paragraph continuations without crashing', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`- item1
+  paragraph continuation
+- item2`}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><ul>
+      <li><p>item1</p>
+      <p>paragraph continuation</p>
+      </li>
+      <li><p>item2</p>
+      </li>
+      </ul>
+      </div><!--/$-->"
+    `);
+  });
+  it('renders nested lists in the correct format for browsers', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`
+- parent list item
+    - nested list item 1
+    - nested list item 2
+- another parent item
+    1. nested ordered item 1
+    2. nested ordered item 2
+       `}
+      </Markdown>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><ul>
+      <li><p>parent list item</p>
+      <ul>
+      <li>nested list item 1</li>
+      <li>nested list item 2</li>
+      </ul>
+      </li>
+      <li><p>another parent item</p>
+      <ol>
+      <li>nested ordered item 1</li>
+      <li>nested ordered item 2</li>
+      </ol>
+      </li>
+      </ul>
+      </div><!--/$-->"
+    `);
+  });
+});