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

package/src/components/button/utils/parse-padding.ts

@@ -0,0 +1,137 @@
+type PaddingType = string | number | undefined;
+
+interface PaddingProperties {
+  padding?: PaddingType;
+  paddingTop?: PaddingType;
+  paddingRight?: PaddingType;
+  paddingBottom?: PaddingType;
+  paddingLeft?: PaddingType;
+}
+
+/**
+ * converts padding value to `px` equivalent.
+ * @example "1em" =\> 16
+ */
+export function convertToPx(value: PaddingType) {
+  let px = 0;
+
+  if (!value) {
+    return px;
+  }
+
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  const matches = /^([\d.]+)(px|em|rem|%)$/.exec(value);
+
+  if (matches && matches.length === 3) {
+    const numValue = Number.parseFloat(matches[1]!);
+    const unit = matches[2]!;
+
+    switch (unit) {
+      case 'px':
+        return numValue;
+      case 'em':
+      case 'rem':
+        px = numValue * 16;
+        return px;
+      case '%':
+        px = (numValue / 100) * 600;
+        return px;
+      default:
+        return numValue;
+    }
+  }
+  return 0;
+}
+
+function parsePaddingValue(value: PaddingType) {
+  if (typeof value === 'number')
+    return {
+      paddingTop: value,
+      paddingBottom: value,
+      paddingLeft: value,
+      paddingRight: value,
+    };
+
+  if (typeof value === 'string') {
+    const values = value.toString().trim().split(/\s+/);
+
+    if (values.length === 1) {
+      return {
+        paddingTop: values[0],
+        paddingBottom: values[0],
+        paddingLeft: values[0],
+        paddingRight: values[0],
+      };
+    }
+
+    if (values.length === 2) {
+      return {
+        paddingTop: values[0],
+        paddingRight: values[1],
+        paddingBottom: values[0],
+        paddingLeft: values[1],
+      };
+    }
+
+    if (values.length === 3) {
+      return {
+        paddingTop: values[0],
+        paddingRight: values[1],
+        paddingBottom: values[2],
+        paddingLeft: values[1],
+      };
+    }
+
+    if (values.length === 4) {
+      return {
+        paddingTop: values[0],
+        paddingRight: values[1],
+        paddingBottom: values[2],
+        paddingLeft: values[3],
+      };
+    }
+  }
+
+  return {
+    paddingTop: undefined,
+    paddingBottom: undefined,
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  };
+}
+
+/**
+ * Parses all the values out of a padding string to get the value for all padding props in `px`
+ * @example e.g. "10px" =\> pt: 10, pr: 10, pb: 10, pl: 10
+ */
+export function parsePadding(properties: PaddingProperties) {
+  let paddingTop: string | number | undefined;
+  let paddingRight: string | number | undefined;
+  let paddingBottom: string | number | undefined;
+  let paddingLeft: string | number | undefined;
+
+  for (const [key, value] of Object.entries(properties)) {
+    if (key === 'padding') {
+      ({ paddingTop, paddingBottom, paddingLeft, paddingRight } =
+        parsePaddingValue(value));
+    } else if (key === 'paddingTop') {
+      paddingTop = value;
+    } else if (key === 'paddingRight') {
+      paddingRight = value;
+    } else if (key === 'paddingBottom') {
+      paddingBottom = value;
+    } else if (key === 'paddingLeft') {
+      paddingLeft = value;
+    }
+  }
+
+  return {
+    paddingTop: paddingTop ? convertToPx(paddingTop) : undefined,
+    paddingRight: paddingRight ? convertToPx(paddingRight) : undefined,
+    paddingBottom: paddingBottom ? convertToPx(paddingBottom) : undefined,
+    paddingLeft: paddingLeft ? convertToPx(paddingLeft) : undefined,
+  };
+}

package/src/components/button/utils/px-to-pt.ts

@@ -0,0 +1,4 @@
+export const pxToPt = (px: number | undefined): number | undefined =>
+  typeof px === 'number' && !Number.isNaN(Number(px))
+    ? (px * 3) / 4
+    : undefined;

package/src/components/button/utils/utils.spec.ts

@@ -0,0 +1,153 @@
+import { convertToPx, parsePadding } from './parse-padding.js';
+import { pxToPt } from './px-to-pt.js';
+
+describe('convertToPx', () => {
+  it('converts "10px" to 10', () => {
+    const result = convertToPx('10px');
+    expect(result).toBe(10);
+  });
+
+  it('converts "2em" to 32', () => {
+    const result = convertToPx('2em');
+    expect(result).toBe(32);
+  });
+
+  it('converts "1.5rem" to 24', () => {
+    const result = convertToPx('1.5rem');
+    expect(result).toBe(24);
+  });
+
+  it('converts "50%" to 300', () => {
+    const result = convertToPx('50%');
+    expect(result).toBe(300);
+  });
+
+  it('converts "15cm" to 0 (unsupported unit)', () => {
+    const result = convertToPx('15cm');
+    expect(result).toBe(0);
+  });
+
+  it('converts "invalid-format" to 0 (invalid input)', () => {
+    const result = convertToPx('invalid-format');
+    expect(result).toBe(0);
+  });
+
+  it('converts empaddingTopy input to 0', () => {
+    const result = convertToPx('');
+    expect(result).toBe(0);
+  });
+});
+
+describe('parsePadding', () => {
+  it('parses number input as all paddings', () => {
+    const result = parsePadding({ padding: 10 });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 10,
+      paddingBottom: 10,
+      paddingLeft: 10,
+    });
+  });
+
+  it('parses "10px" as all paddings', () => {
+    const result = parsePadding({ padding: '10px' });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 10,
+      paddingBottom: 10,
+      paddingLeft: 10,
+    });
+  });
+
+  it('parses "10px 20px" as paddingTop, paddingRight, paddingLeft, paddingBottom', () => {
+    const result = parsePadding({ padding: '10px 2em' });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 32,
+      paddingBottom: 10,
+      paddingLeft: 32,
+    });
+  });
+
+  it('parses "10px 20px 30px" as paddingTop, paddingRight, paddingBottom, paddingLeft', () => {
+    const result = parsePadding({ padding: '10px 20px 30px' });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 20,
+      paddingBottom: 30,
+      paddingLeft: 20,
+    });
+  });
+
+  it('parses "10px 20px 30px 40px" as paddingTop, paddingRight, paddingBottom, paddingLeft', () => {
+    const result = parsePadding({ padding: '10px 20px 30px 40px' });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 20,
+      paddingBottom: 30,
+      paddingLeft: 40,
+    });
+  });
+
+  it('handles undefined input as undefined', () => {
+    const result = parsePadding({ padding: undefined });
+    expect(result).toEqual({
+      paddingTop: undefined,
+      paddingRight: undefined,
+      paddingBottom: undefined,
+      paddingLeft: undefined,
+    });
+  });
+
+  it('handles empty string input as undefined', () => {
+    const result = parsePadding({ padding: '' });
+    expect(result).toEqual({
+      paddingTop: undefined,
+      paddingRight: undefined,
+      paddingBottom: undefined,
+      paddingLeft: undefined,
+    });
+  });
+
+  it('overrides general padding value with specific padding value if specified', () => {
+    const result = parsePadding({ padding: 10, paddingRight: '1em' });
+    expect(result).toEqual({
+      paddingTop: 10,
+      paddingRight: 16,
+      paddingBottom: 10,
+      paddingLeft: 10,
+    });
+  });
+});
+
+describe('pxToPt', () => {
+  it('converts "10px" to 7.5', () => {
+    const result = pxToPt(10);
+    expect(result).toBe(7.5);
+  });
+
+  it('converts "20px" to 15', () => {
+    const result = pxToPt(20);
+    expect(result).toBe(15);
+  });
+
+  it('converts "0px" to 0', () => {
+    const result = pxToPt(0);
+    expect(result).toBe(0);
+  });
+
+  it('returns null for invalid input "invalid"', () => {
+    const result = pxToPt('invalid' as unknown as number);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns null for empaddingTopy input', () => {
+    const result = pxToPt('' as unknown as number);
+    expect(result).toBeUndefined();
+  });
+
+  it('returns null for undefined input', () => {
+    const result = pxToPt(undefined as unknown as number);
+    expect(result).toBeUndefined();
+  });
+});

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { markAsElement } from '../element-marker.js';
+import type { PrismLanguage } from './languages-available.js';
+import { Prism } from './prism.js';
+import type { Theme } from './themes.js';
+
+type PrismToken = InstanceType<typeof Prism.Token>;
+
+export interface CodeBlockProps extends React.ComponentPropsWithoutRef<'pre'> {
+  lineNumbers?: boolean;
+
+  /**
+   * This applies a certain font family on all elements render in this component,
+   * it is mostly meant to override a global font that has already been used with
+   * our `<Font>` component
+   */
+  fontFamily?: string;
+
+  theme: Theme;
+  language: PrismLanguage;
+  code: string;
+}
+
+const stylesForToken = (token: PrismToken, theme: Theme) => {
+  let styles = { ...theme[token.type] };
+
+  const aliases = Array.isArray(token.alias) ? token.alias : [token.alias];
+
+  for (const alias of aliases) {
+    styles = { ...styles, ...theme[alias] };
+  }
+
+  return styles;
+};
+
+const CodeBlockLine = ({
+  token,
+  theme,
+  inheritedStyles,
+}: {
+  token: string | PrismToken;
+  theme: Theme;
+  inheritedStyles?: React.CSSProperties;
+}) => {
+  if (token instanceof Prism.Token) {
+    const styleForToken = {
+      ...inheritedStyles,
+      ...stylesForToken(token, theme),
+    };
+
+    if (token.content instanceof Prism.Token) {
+      return (
+        <span style={styleForToken}>
+          <CodeBlockLine theme={theme} token={token.content} />
+        </span>
+      );
+    }
+    if (typeof token.content === 'string') {
+      return <span style={styleForToken}>{token.content}</span>;
+    }
+    return (
+      <>
+        {token.content.map((subToken, i) => (
+          <CodeBlockLine
+            inheritedStyles={styleForToken}
+            key={i}
+            theme={theme}
+            token={subToken}
+          />
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <span style={inheritedStyles}>
+      {token.replaceAll(' ', '\xA0\u200D\u200B')}
+    </span>
+  );
+};
+
+export const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
+  ({ code, fontFamily, lineNumbers, theme, language, ...rest }, ref) => {
+    const languageGrammar = Prism.languages[language];
+    if (typeof languageGrammar === 'undefined') {
+      throw new Error(
+        `CodeBlock: There is no language defined on Prism called ${language}`,
+      );
+    }
+
+    const lines = code.split(/\r\n|\r|\n/gm);
+    const tokensPerLine = lines.map((line) =>
+      Prism.tokenize(line, languageGrammar),
+    );
+
+    return (
+      <pre
+        {...rest}
+        ref={ref}
+        style={{ ...theme.base, width: '100%', ...rest.style }}
+      >
+        <code>
+          {tokensPerLine.map((tokensForLine, lineIndex) => (
+            <React.Fragment key={lineIndex}>
+              {lineNumbers ? (
+                <span
+                  style={{
+                    width: '2em',
+                    height: '1em',
+                    display: 'inline-block',
+                    fontFamily: fontFamily,
+                  }}
+                >
+                  {lineIndex + 1}
+                </span>
+              ) : null}
+
+              {tokensForLine.map((token, i) => (
+                <CodeBlockLine
+                  inheritedStyles={{ fontFamily: fontFamily }}
+                  key={i}
+                  theme={theme}
+                  token={token}
+                />
+              ))}
+              <br />
+            </React.Fragment>
+          ))}
+        </code>
+      </pre>
+    );
+  },
+);
+
+CodeBlock.displayName = 'CodeBlock';
+markAsElement(CodeBlock);

package/src/components/code-block/index.ts

@@ -0,0 +1,3 @@
+export * from './code-block.js';
+export * from './languages-available.js';
+export * from './themes.js';