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/code-inline/code-inline.tsx ADDED Viewed

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+type RootProps = React.ComponentPropsWithoutRef<'code'> &
+  React.ComponentPropsWithoutRef<'span'>;
+export type CodeInlineProps = Readonly<RootProps>;
+/**
+ * If you are sending emails for users that have the Orange.fr email client,
+ * beware that this component will only work when you have a head containing meta tags.
+ */
+export const CodeInline = React.forwardRef<HTMLSpanElement, CodeInlineProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <>
+        {/*
+    This style tag is targeted at fixing an issue for the Orange.fr email client
+    See:
+    - https://www.caniemail.com/features/html-code/
+    - https://www.howtotarget.email/#2019-03-26-freenet-2
+    On that email client, the head and html elements are removed, making the meta tag a sibling of them
+    allowing us to use a selector on them. Also <style> tags are supported on it.
+    */}
+        <style>{`
+        meta ~ .cino {
+          display: none !important;
+          opacity: 0 !important;
+        }
+        meta ~ .cio {
+          display: block !important;
+        }
+      `}</style>
+        {/* Does not render on Orange.fr */}
+        <code
+          {...props}
+          className={`${props.className ? props.className : ''} cino`}
+        >
+          {children}
+        </code>
+        {/* Renders only on Orange.fr */}
+        <span
+          {...props}
+          className={`${props.className ? props.className : ''} cio`}
+          ref={ref}
+          style={{ display: 'none', ...props.style }}
+        >
+          {children}
+        </span>
+      </>
+    );
+  },
+);
+CodeInline.displayName = 'CodeInline';
+markAsElement(CodeInline);

package/src/components/code-inline/index.ts ADDED Viewed

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

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

@@ -0,0 +1,28 @@
+import { render } from '@react-email/render';
+import { Column } from './index.js';
+describe('<Column> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Column>{testMessage}</Column>);
+    expect(html).toContain(testMessage);
+  });
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Column data-testid="column-test" style={style}>
+        Test
+      </Column>,
+    );
+    expect(html).toContain('style="background-color:red"');
+    expect(html).toContain('data-testid="column-test"');
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Column>Lorem ipsum</Column>);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><td data-id="__react-email-column">Lorem ipsum</td><!--/$-->"`,
+    );
+  });
+});

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type ColumnProps = Readonly<React.ComponentPropsWithoutRef<'td'>>;
+export const Column = React.forwardRef<HTMLTableCellElement, ColumnProps>(
+  ({ children, style, ...props }, ref) => {
+    return (
+      <td {...props} data-id="__react-email-column" ref={ref} style={style}>
+        {children}
+      </td>
+    );
+  },
+);
+Column.displayName = 'Column';
+markAsElement(Column);

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

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

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

@@ -0,0 +1,33 @@
+import { render } from '@react-email/render';
+import { Container } from './index.js';
+describe('<Container> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Container>{testMessage}</Container>);
+    expect(html).toContain(testMessage);
+  });
+  it('passes style and other props correctly', async () => {
+    const style = { maxWidth: 300, backgroundColor: 'red' };
+    const html = await render(
+      <Container data-testid="container-test" style={style}>
+        Test
+      </Container>,
+    );
+    expect(html).toContain('style="max-width:300px;background-color:red"');
+    expect(html).toContain('data-testid="container-test"');
+  });
+  it('renders correctly', async () => {
+    const container = await render(
+      <Container style={{ maxWidth: '300px' }}>
+        <button type="button">Hi</button>
+      </Container>,
+    );
+    expect(container).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" style="max-width:300px"><tbody><tr style="width:100%"><td><button type="button">Hi</button></td></tr></tbody></table><!--/$-->"`,
+    );
+  });
+});

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
+export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
+  ({ 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%"
+        {...props}
+        border={0}
+        cellPadding="0"
+        cellSpacing="0"
+        ref={ref}
+        role="presentation"
+        style={{ maxWidth: '37.5em', ...tableStyle }}
+      >
+        <tbody>
+          <tr style={{ width: '100%' }}>
+            <td style={tdStyle}>{children}</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  },
+);
+Container.displayName = 'Container';
+markAsElement(Container);

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

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

package/src/components/element-marker.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export const elementMarker = Symbol.for('react-email.element');
+export const markAsElement = (component: unknown) => {
+  (component as Record<symbol, boolean>)[elementMarker] = true;
+};

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

@@ -0,0 +1,63 @@
+import { render } from '@react-email/render';
+import { Font } from './index.js';
+describe('<Font> component', () => {
+  it('renders with default props', async () => {
+    const html = await render(
+      <Font fallbackFontFamily="Helvetica" fontFamily="Arial" />,
+    );
+    expect(html).toContain('font-style: normal;');
+    expect(html).toContain('font-weight: 400;');
+    expect(html).toContain("font-family: 'Arial';");
+  });
+  it('renders with webFont prop', async () => {
+    const webFont = {
+      url: 'example.com/font.woff',
+      format: 'woff',
+    } as const;
+    const html = await render(
+      <Font
+        fallbackFontFamily="Helvetica"
+        fontFamily="Example"
+        webFont={webFont}
+      />,
+    );
+    expect(html).toContain("font-family: 'Example';");
+    expect(html).toContain(
+      `src: url(${webFont.url}) format('${webFont.format}');`,
+    );
+  });
+  it('renders with multiple fallback fonts', async () => {
+    const html = await render(
+      <Font fallbackFontFamily={['Helvetica', 'Verdana']} fontFamily="Arial" />,
+    );
+    expect(html).toContain("font-family: 'Arial', Helvetica, Verdana;");
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(
+      <Font fallbackFontFamily="Verdana" fontFamily="Roboto" />,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><style>
+          @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            mso-font-alt: 'Verdana';
+          }
+          * {
+            font-family: 'Roboto', Verdana;
+          }
+        </style><!--/$-->"
+    `);
+  });
+});

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

@@ -0,0 +1,76 @@
+import type * as React from 'react';
+type FallbackFont =
+  | 'Arial'
+  | 'Helvetica'
+  | 'Verdana'
+  | 'Georgia'
+  | 'Times New Roman'
+  | 'serif'
+  | 'sans-serif'
+  | 'monospace'
+  | 'cursive'
+  | 'fantasy';
+type FontFormat =
+  | 'woff'
+  | 'woff2'
+  | 'truetype'
+  | 'opentype'
+  | 'embedded-opentype'
+  | 'svg';
+type FontWeight = React.CSSProperties['fontWeight'];
+type FontStyle = React.CSSProperties['fontStyle'];
+export interface FontProps {
+  /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */
+  fontFamily: string;
+  /** An array is possible, but the order of the array is the priority order */
+  fallbackFontFamily: FallbackFont | FallbackFont[];
+  /** Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/ */
+  webFont?: {
+    url: string;
+    format: FontFormat;
+  };
+  /** Default: 'normal' */
+  fontStyle?: FontStyle;
+  /** Default: 400 */
+  fontWeight?: FontWeight;
+}
+/** The component MUST be place inside the <head> tag */
+export const Font: React.FC<Readonly<FontProps>> = ({
+  fontFamily,
+  fallbackFontFamily,
+  webFont,
+  fontStyle = 'normal',
+  fontWeight = 400,
+}) => {
+  const src = webFont
+    ? `src: url(${webFont.url}) format('${webFont.format}');`
+    : '';
+  const style = `
+    @font-face {
+      font-family: '${fontFamily}';
+      font-style: ${fontStyle};
+      font-weight: ${fontWeight};
+      mso-font-alt: '${
+        Array.isArray(fallbackFontFamily)
+          ? fallbackFontFamily[0]
+          : fallbackFontFamily
+      }';
+      ${src}
+    }
+    * {
+      font-family: '${fontFamily}', ${
+        Array.isArray(fallbackFontFamily)
+          ? fallbackFontFamily.join(', ')
+          : fallbackFontFamily
+      };
+    }
+  `;
+  return <style dangerouslySetInnerHTML={{ __html: style }} />;
+};

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

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

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

@@ -0,0 +1,34 @@
+import { render } from '@react-email/render';
+import { Head } from './index.js';
+describe('<Head> component', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Head>{testMessage}</Head>);
+    expect(html).toContain(testMessage);
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Head />);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><!--$--><!--head--><!--/$-->"`,
+    );
+  });
+  it('renders style tags', async () => {
+    const actualOutput = await render(
+      <Head>
+        <style>
+          {`body{
+            color: red;
+          }`}
+        </style>
+      </Head>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(`
+      "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>body{
+                  color: red;
+                }</style></head><!--$--><!--head--><!--/$-->"
+    `);
+  });
+});

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export type HeadProps = Readonly<React.ComponentPropsWithoutRef<'head'>>;
+export const Head = React.forwardRef<HTMLHeadElement, HeadProps>(
+  ({ children, ...props }, ref) => (
+    <head {...props} ref={ref}>
+      <meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
+      <meta name="x-apple-disable-message-reformatting" />
+      {children}
+    </head>
+  ),
+);
+Head.displayName = 'Head';

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

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

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

@@ -0,0 +1,32 @@
+import { render } from '@react-email/render';
+import { Heading } from './index.js';
+describe('render', () => {
+  it('renders children correctly', async () => {
+    const testMessage = 'Test message';
+    const html = await render(<Heading>{testMessage}</Heading>);
+    expect(html).toContain(testMessage);
+  });
+  it('passes style and other props correctly', async () => {
+    const style = { backgroundColor: 'red' };
+    const html = await render(
+      <Heading data-testid="heading-test" style={style}>
+        Test
+      </Heading>,
+    );
+    expect(html).toContain('background-color:red');
+    expect(html).toContain('data-testid="heading-test"');
+  });
+  it('renders the <Heading> component', async () => {
+    const actualOutput = await render(
+      <Heading as="h2" mx={4}>
+        Lorem ipsum
+      </Heading>,
+    );
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><h2 style="margin-left:4px;margin-right:4px">Lorem ipsum</h2><!--/$-->"`,
+    );
+  });
+});

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+import type { As } from './utils/as.js';
+import type { Margin } from './utils/spaces.js';
+import { withMargin } from './utils/spaces.js';
+export type HeadingAs = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'>;
+export type HeadingProps = HeadingAs & Margin;
+export const Heading = React.forwardRef<
+  HTMLHeadingElement,
+  Readonly<HeadingProps>
+>(
+  (
+    { as: Tag = 'h1', children, style, m, mx, my, mt, mr, mb, ml, ...props },
+    ref,
+  ) => {
+    return (
+      <Tag
+        {...props}
+        ref={ref}
+        style={{ ...withMargin({ m, mx, my, mt, mr, mb, ml }), ...style }}
+      >
+        {children}
+      </Tag>
+    );
+  },
+);
+Heading.displayName = 'Heading';
+markAsElement(Heading);

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

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

package/src/components/heading/utils/as.ts ADDED Viewed

@@ -0,0 +1,26 @@
+export type As<
+  DefaultTag extends React.ElementType,
+  T1 extends React.ElementType,
+  T2 extends React.ElementType = T1,
+  T3 extends React.ElementType = T1,
+  T4 extends React.ElementType = T1,
+  T5 extends React.ElementType = T1,
+> =
+  | (React.ComponentPropsWithRef<DefaultTag> & {
+      as?: DefaultTag;
+    })
+  | (React.ComponentPropsWithRef<T1> & {
+      as: T1;
+    })
+  | (React.ComponentPropsWithRef<T2> & {
+      as: T2;
+    })
+  | (React.ComponentPropsWithRef<T3> & {
+      as: T3;
+    })
+  | (React.ComponentPropsWithRef<T4> & {
+      as: T4;
+    })
+  | (React.ComponentPropsWithRef<T5> & {
+      as: T5;
+    });

package/src/components/heading/utils/spaces.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import type React from 'react';
+type MarginCSSProperty =
+  | 'margin'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'marginTop'
+  | 'marginBottom';
+type MarginStyles = Partial<Pick<React.CSSProperties, MarginCSSProperty>>;
+export interface Margin {
+  m?: number | string;
+  mx?: number | string;
+  my?: number | string;
+  mt?: number | string;
+  mr?: number | string;
+  mb?: number | string;
+  ml?: number | string;
+}
+export const withMargin = (props: Margin): MarginStyles => {
+  const candidates = [
+    withSpace(props.m, ['margin']),
+    withSpace(props.mx, ['marginLeft', 'marginRight']),
+    withSpace(props.my, ['marginTop', 'marginBottom']),
+    withSpace(props.mt, ['marginTop']),
+    withSpace(props.mr, ['marginRight']),
+    withSpace(props.mb, ['marginBottom']),
+    withSpace(props.ml, ['marginLeft']),
+  ];
+  const mergedStyles: MarginStyles = {};
+  for (const style of candidates) {
+    if (Object.keys(style).length > 0) {
+      Object.assign(mergedStyles, style);
+    }
+  }
+  return mergedStyles;
+};
+export const withSpace = (
+  value: number | string | undefined,
+  properties: MarginCSSProperty[],
+) => {
+  const styles: MarginStyles = {};
+  if (value === undefined) {
+    return styles;
+  }
+  // Check to ensure string value is a valid number
+  if (Number.isNaN(Number.parseFloat(String(value)))) {
+    return styles;
+  }
+  for (const property of properties) {
+    styles[property] = `${value}px` as React.CSSProperties[MarginCSSProperty];
+  }
+  return styles;
+};

package/src/components/heading/utils/utils.spec.ts ADDED Viewed

@@ -0,0 +1,70 @@
+import type { Margin } from './spaces.js';
+import { withMargin, withSpace } from './spaces.js';
+describe('withMargin', () => {
+  it('returns an empty object for empty input', () => {
+    const marginProps: Margin = {};
+    const result = withMargin(marginProps);
+    expect(result).toEqual({});
+  });
+  it('applies margin to the top', () => {
+    const marginProps: Margin = { mt: '10' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({ marginTop: '10px' });
+  });
+  it('applies margin to the left and right', () => {
+    const marginProps: Margin = { mx: '20' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({ marginLeft: '20px', marginRight: '20px' });
+  });
+  it('applies margin to the top and bottom', () => {
+    const marginProps: Margin = { my: '15' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({
+      marginBottom: '15px',
+      marginTop: '15px',
+    });
+  });
+  it('applies margin to all sides', () => {
+    const marginProps: Margin = { m: '25' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({
+      margin: '25px',
+    });
+  });
+  it('applies margin to specified sides when provided', () => {
+    const marginProps: Margin = { mt: '5', mr: '10', mb: '15', ml: '20' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({
+      marginBottom: '15px',
+      marginLeft: '20px',
+      marginRight: '10px',
+      marginTop: '5px',
+    });
+  });
+  it('ignores invalid margin values', () => {
+    const marginProps: Margin = { m: 'invalid', mt: '5', mx: 'valid' };
+    const result = withMargin(marginProps);
+    expect(result).toEqual({
+      marginTop: '5px',
+    });
+  });
+});
+describe('withSpace', () => {
+  it('returns an empty object for undefined value', () => {
+    const result = withSpace(undefined, ['margin']);
+    expect(result).toEqual({});
+  });
+  it('applies space to the specified properties', () => {
+    const result = withSpace(15, ['marginTop', 'marginLeft']);
+    expect(result).toEqual({ marginTop: '15px', marginLeft: '15px' });
+  });
+});

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

@@ -0,0 +1,22 @@
+import { render } from '@react-email/render';
+import { Hr } from './index.js';
+describe('<Hr> component', () => {
+  it('passes styles and other props correctly', async () => {
+    const style = {
+      width: '50%',
+      borderColor: 'black',
+    };
+    const html = await render(<Hr data-testid="hr-test" style={style} />);
+    expect(html).toContain('width:50%');
+    expect(html).toContain('border-color:black');
+    expect(html).toContain('data-testid="hr-test"');
+  });
+  it('renders correctly', async () => {
+    const actualOutput = await render(<Hr />);
+    expect(actualOutput).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><hr style="width:100%;border:none;border-color:transparent;border-top:1px solid #eaeaea"/><!--/$-->"`,
+    );
+  });
+});