@comet/mail-react 9.0.0-beta.2 → 9.0.0-beta.4

package/lib/components/text/textStyles.js

@@ -14,18 +14,21 @@ export const textStyleCssProperties = [
 /** Generates responsive CSS media queries for text variant overrides. */
 export function generateResponsiveTextCss(theme, options) {
     const { variants } = theme.text;
-    if (!variants)
+    if (!variants) {
         return css ``;
+    }
     const cssChunks = [];
     for (const [variantName, variantStyles] of Object.entries(variants)) {
-        if (!variantStyles)
+        if (!variantStyles) {
             continue;
+        }
         const styleOverrides = new Map();
         const spacingOverrides = new Map();
         for (const [themeKey, cssProperty] of textStyleCssProperties) {
             const value = variantStyles[themeKey];
-            if (value === undefined)
+            if (value === undefined) {
                 continue;
+            }
             for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
                 const declarations = styleOverrides.get(breakpointKey) ?? [];
                 declarations.push(`${cssProperty}: ${String(breakpointValue)} !important`);
@@ -42,8 +45,9 @@ export function generateResponsiveTextCss(theme, options) {
         }
         for (const [breakpointKey, declarations] of styleOverrides) {
             const breakpoint = theme.breakpoints[breakpointKey];
-            if (!breakpoint)
+            if (!breakpoint) {
                 continue;
+            }
             cssChunks.push(css `
                 ${breakpoint.belowMediaQuery} {
                     ${options.styleSelector(variantName)} {
@@ -54,8 +58,9 @@ export function generateResponsiveTextCss(theme, options) {
         }
         for (const [breakpointKey, declarations] of spacingOverrides) {
             const breakpoint = theme.breakpoints[breakpointKey];
-            if (!breakpoint)
+            if (!breakpoint) {
                 continue;
+            }
             cssChunks.push(css `
                 ${breakpoint.belowMediaQuery} {
                     ${options.spacingSelector(variantName)} {

package/lib/components/wrapper/InsideMjmlWrapperContext.d.ts

@@ -0,0 +1,3 @@
+export declare const InsideMjmlWrapperContext: import("react").Context<boolean>;
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export declare function useIsInsideMjmlWrapper(): boolean;

package/lib/components/wrapper/InsideMjmlWrapperContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const InsideMjmlWrapperContext = createContext(false);
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export function useIsInsideMjmlWrapper() {
+    return useContext(InsideMjmlWrapperContext);
+}

package/lib/components/wrapper/MjmlWrapper.d.ts

@@ -0,0 +1,7 @@
+import { type IMjmlWrapperProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlWrapperProps = IMjmlWrapperProps;
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of MjmlBody.
+ */
+export declare function MjmlWrapper({ children, ...restProps }: MjmlWrapperProps): ReactNode;

package/lib/components/wrapper/MjmlWrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlWrapper as BaseMjmlWrapper } from "@faire/mjml-react";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { InsideMjmlWrapperContext } from "./InsideMjmlWrapperContext.js";
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of MjmlBody.
+ */
+export function MjmlWrapper({ children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themeBackgroundProps = theme ? { backgroundColor: theme.colors.background.content } : {};
+    return (_jsx(BaseMjmlWrapper, { ...themeBackgroundProps, ...restProps, children: _jsx(InsideMjmlWrapperContext.Provider, { value: true, children: children }) }));
+}

package/lib/components/wrapper/__stories__/MjmlWrapper.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlWrapper } from "../MjmlWrapper.js";
+type Story = StoryObj<typeof MjmlWrapper>;
+declare const config: Meta<typeof MjmlWrapper>;
+export default config;
+export declare const Primary: Story;
+export declare const ExplicitBackgroundColor: Story;
+export declare const MultipleWrappersWithDifferentBackgrounds: Story;
+export declare const TransparentBackground: Story;
+export declare const FullWidth: Story;

package/lib/components/wrapper/__stories__/MjmlWrapper.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlColumn, MjmlSpacer } from "@faire/mjml-react";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlText } from "../../text/MjmlText.js";
+import { MjmlWrapper } from "../MjmlWrapper.js";
+const config = {
+    title: "Components/MjmlWrapper",
+    component: MjmlWrapper,
+    tags: ["autodocs"],
+};
+export default config;
+export const Primary = {
+    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with the default theme background" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "A second section; both share the wrapper's background" }) }) })] })),
+};
+export const ExplicitBackgroundColor = {
+    args: {
+        backgroundColor: "#2d4a6e",
+    },
+    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { color: "#ffffff", bottomSpacing: true, children: "Explicit wrapper background; sections inside do not paint over it" }), _jsx(MjmlText, { color: "#ffffff", children: "A second section shares the wrapper background" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
+};
+export const MultipleWrappersWithDifferentBackgrounds = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsxs(MjmlWrapper, { ...args, backgroundColor: "#8fa5bf", children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #1" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 20 }) }) })] }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#c0c1c4", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #2" }), _jsx(MjmlSpacer, { height: 20 })] }) }) }), _jsx(MjmlWrapper, { ...args, backgroundColor: "#ffffff", children: _jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Section content inside a wrapper with a different background #3" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })] })),
+};
+export const TransparentBackground = {
+    args: {
+        backgroundColor: "transparent",
+    },
+    render: (args) => (_jsx(MjmlWrapper, { ...args, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 20 }), _jsx(MjmlText, { children: "Transparent wrapper; the body background shows through" }), _jsx(MjmlSpacer, { height: 20 })] }) }) })),
+};
+export const FullWidth = {
+    args: {
+        fullWidth: true,
+        backgroundColor: "#2d4a6e",
+    },
+    render: (args) => (_jsxs(MjmlWrapper, { ...args, children: [_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "Full-width wrapper background extends edge-to-edge" }) }) }), _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { color: "#ffffff", children: "The section inside does not override the wrapper's background" }) }) })] })),
+};

package/lib/config/ConfigProvider.d.ts

@@ -0,0 +1,43 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+export interface PixelImageBlockConfig {
+    /**
+     * Image widths supported by the API, used to pick a render width.
+     * Generally derived from `cometConfig.images.imageSizes` and `cometConfig.images.deviceSizes`.
+     */
+    validSizes: number[];
+    /**
+     * Origin to prefix relative image URLs with, e.g. `http://localhost:3000`.
+     */
+    baseUrl: string;
+}
+/**
+ * Configuration context for mails.
+ *
+ * Add custom keys via TypeScript interface declaration merging:
+ *
+ * ```ts
+ * declare module "@comet/mail-react" {
+ *     interface Config {
+ *         myKey?: { foo: string };
+ *     }
+ * }
+ * ```
+ */
+export interface Config {
+    /**
+     * Configuration consumed by `HtmlPixelImageBlock` and `MjmlPixelImageBlock`.
+     * Required when those components are rendered.
+     */
+    pixelImageBlock?: PixelImageBlockConfig;
+}
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export declare function ConfigProvider({ config, children }: PropsWithChildren<{
+    config: Config;
+}>): ReactNode;
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export declare function useConfig(): Config;

package/lib/config/ConfigProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ConfigContext = createContext({});
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export function ConfigProvider({ config, children }) {
+    return _jsx(ConfigContext.Provider, { value: config, children: children });
+}
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export function useConfig() {
+    return useContext(ConfigContext);
+}

package/lib/config/ConfigProvider.test.d.ts

@@ -0,0 +1,8 @@
+declare module "./ConfigProvider.js" {
+    interface Config {
+        testKey?: {
+            value: string;
+        };
+    }
+}
+export {};

package/lib/config/ConfigProvider.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlColumn, MjmlText } from "@faire/mjml-react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../components/section/MjmlSection.js";
+import { renderMailHtml } from "../server/renderMailHtml.js";
+import { ConfigProvider, useConfig } from "./ConfigProvider.js";
+function Probe() {
+    const config = useConfig();
+    return _jsx("span", { "data-config-value": config.testKey?.value ?? "no-config" });
+}
+describe("useConfig", () => {
+    it("returns an empty Config when no ConfigProvider is mounted", () => {
+        const html = renderToStaticMarkup(_jsx(Probe, {}));
+        expect(html).toContain('data-config-value="no-config"');
+    });
+});
+describe("MjmlMailRoot config integration", () => {
+    it("makes the config value available to descendants via useConfig", () => {
+        const { html, mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { config: { testKey: { value: "from-root" } }, children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+        expect(html).toContain('data-config-value="from-root"');
+    });
+    it("does not shadow an outer ConfigProvider when no config prop is passed", () => {
+        const { html, mjmlWarnings } = renderMailHtml(_jsx(ConfigProvider, { config: { testKey: { value: "from-outer" } }, children: _jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: _jsx(Probe, {}) }) }) }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+        expect(html).toContain('data-config-value="from-outer"');
+    });
+});

package/lib/index.d.ts

@@ -4,6 +4,10 @@ export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
 export type { SupportedBlocks } from "./blocks/factories/types.js";
 export type { PropsWithData } from "./blocks/helpers/PropsWithData.js";
+export type { HtmlPixelImageBlockProps } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export type { MjmlPixelImageBlockProps } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
 export type { HtmlInlineLinkProps } from "./components/inlineLink/HtmlInlineLink.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
@@ -13,6 +17,9 @@ export type { HtmlTextProps } from "./components/text/HtmlText.js";
 export { HtmlText } from "./components/text/HtmlText.js";
 export type { MjmlTextProps } from "./components/text/MjmlText.js";
 export { MjmlText } from "./components/text/MjmlText.js";
+export type { MjmlWrapperProps } from "./components/wrapper/MjmlWrapper.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { type Config, ConfigProvider, type PixelImageBlockConfig, useConfig } from "./config/ConfigProvider.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 export { createTheme } from "./theme/createTheme.js";
@@ -21,6 +28,6 @@ export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/r
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export type { TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeColors, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
 export { css } from "./utils/css.js";
-export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlDivider, type IMjmlDividerProps as MjmlDividerProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlImage, type IMjmlImageProps as MjmlImageProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, MjmlWrapper, type IMjmlWrapperProps as MjmlWrapperProps, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlButton, type IMjmlButtonProps as MjmlButtonProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlDivider, type IMjmlDividerProps as MjmlDividerProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlImage, type IMjmlImageProps as MjmlImageProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/index.js

@@ -2,17 +2,21 @@ export { BlocksBlock } from "./blocks/factories/BlocksBlock.js";
 export { ListBlock } from "./blocks/factories/ListBlock.js";
 export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
 export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
 export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
 export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
 export { MjmlSection } from "./components/section/MjmlSection.js";
 export { HtmlText } from "./components/text/HtmlText.js";
 export { MjmlText } from "./components/text/MjmlText.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { ConfigProvider, useConfig } from "./config/ConfigProvider.js";
 export { registerStyles } from "./styles/registerStyles.js";
 export { createBreakpoint } from "./theme/createBreakpoint.js";
 export { createTheme } from "./theme/createTheme.js";
 export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { css } from "./utils/css.js";
-export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlDivider, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlImage, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, MjmlWrapper, } from "@faire/mjml-react";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlButton, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlDivider, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlImage, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
 export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
 export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/server/renderMailHtml.d.ts

@@ -1,5 +1,5 @@
 import mjml2html from "mjml";
-import { type ReactElement } from "react";
+import type { ReactElement } from "react";
 type MjmlOptions = Parameters<typeof mjml2html>[1];
 type MjmlWarning = ReturnType<typeof mjml2html>["errors"][number];
 export declare function renderMailHtml(element: ReactElement, options?: MjmlOptions): {

package/lib/server/renderMailHtml.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MjmlColumn, MjmlText } from "@faire/mjml-react";
+import { MjmlClass, MjmlColumn, MjmlText, MjmlTitle } from "@faire/mjml-react";
 import { describe, expect, it } from "vitest";
 import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
 import { MjmlSection } from "../components/section/MjmlSection.js";
@@ -36,6 +36,15 @@ describe("server/renderMailHtml", () => {
         expect(html).toContain(".themed");
         expect(html).toContain("width: 600px");
     });
+    it("renders the head slot content inside <mj-head>", () => {
+        const titleText = "Welcome to Comet";
+        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { head: _jsx(MjmlTitle, { children: titleText }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Hello" }) }) }) }));
+        expect(html).toContain(`<title>${titleText}</title>`);
+    });
+    it("renders the attributes slot content inside <mj-attributes>", () => {
+        const { html } = renderMailHtml(_jsx(MjmlMailRoot, { attributes: _jsx(MjmlClass, { name: "cta", color: "#FF0000" }), children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { mjmlClass: "cta", children: "Hello" }) }) }) }));
+        expect(html).toContain("color:#FF0000");
+    });
     it("produces no MJML warnings for a valid component tree", () => {
         const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { children: _jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "No warnings expected" }) }) }) }));
         expect(mjmlWarnings).toEqual([]);

package/lib/storybook/preview.d.ts

@@ -3,3 +3,37 @@ export declare const decorators: (typeof MailRendererDecorator)[];
 export declare const initialGlobals: {
     usePublicImageUrls: boolean;
 };
+export declare const parameters: {
+    viewport: {
+        options: {
+            mobile: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            tablet: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            emailWidth: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            desktop: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+};

package/lib/storybook/preview.js

@@ -3,3 +3,25 @@ export const decorators = [MailRendererDecorator];
 export const initialGlobals = {
     usePublicImageUrls: false,
 };
+export const parameters = {
+    viewport: {
+        options: {
+            mobile: {
+                name: "Mobile (375px)",
+                styles: { width: "375px", height: "1024px" },
+            },
+            tablet: {
+                name: "Tablet (500px)",
+                styles: { width: "500px", height: "1024px" },
+            },
+            emailWidth: {
+                name: "Email max-width (600px)",
+                styles: { width: "600px", height: "1024px" },
+            },
+            desktop: {
+                name: "Desktop (768px)",
+                styles: { width: "768px", height: "1024px" },
+            },
+        },
+    },
+};

package/lib/theme/responsiveValue.js

@@ -14,8 +14,9 @@ export function getDefaultFromResponsiveValue(value) {
  * theme properties.
  */
 export function getDefaultOrUndefined(value) {
-    if (value === undefined)
+    if (value === undefined) {
         return undefined;
+    }
     return getDefaultFromResponsiveValue(value);
 }
 /**

package/package.json

@@ -1,44 +1,49 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.4",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
+  "repository": {
+    "directory": "packages/mail-react",
+    "type": "git",
+    "url": "https://github.com/vivid-planet/comet"
+  },
   "exports": {
     ".": "./lib/index.js",
     "./client": "./lib/client/index.js",
     "./server": "./lib/server/index.js",
     "./storybook": "./lib/storybook/index.js"
   },
+  "sideEffects": false,
   "files": [
     "lib/*"
   ],
   "dependencies": {
-    "@faire/mjml-react": "^3.5.3",
+    "@faire/mjml-react": "^3.5.4",
     "clsx": "^2.1.1",
     "mjml": "^4.18.0",
     "mjml-browser": "^4.18.0"
   },
   "devDependencies": {
-    "@fission-ai/openspec": "^1.2.0",
-    "@storybook/addon-docs": "^10.3.1",
-    "@storybook/react-vite": "^10.3.1",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@types/mjml": "^4.7.4",
     "@types/mjml-browser": "^4.15.0",
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "chokidar-cli": "^3.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.6.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "rimraf": "^6.1.2",
-    "storybook": "^10.3.1",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@comet/cli": "9.0.0-beta.2",
-    "@comet/eslint-config": "9.0.0-beta.2"
+    "@comet/cli": "9.0.0-beta.4",
+    "@comet/eslint-config": "9.0.0-beta.4"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -71,7 +76,6 @@
     "lint:fix:prettier": "pnpm run lint:prettier --write",
     "lint:prettier": "pnpm exec prettier --check '*.{ts,js,json,md,yml,yaml}'",
     "lint:tsc": "tsc",
-    "openspec:install-skills": "openspec init --tools github-copilot,cursor,claude",
     "storybook": "storybook dev -p 6066 --no-open",
     "test": "vitest --run",
     "test:watch": "vitest --watch"

package/lib/__stories__/examples/TextWithImageEmail.stories.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MjmlColumn, MjmlImage, MjmlSpacer } from "@faire/mjml-react";
-import { MjmlMailRoot } from "../../components/mailRoot/MjmlMailRoot.js";
-import { MjmlSection } from "../../components/section/MjmlSection.js";
-import { MjmlText } from "../../components/text/MjmlText.js";
-import { registerStyles } from "../../styles/registerStyles.js";
-import { createTheme } from "../../theme/createTheme.js";
-import { getDefaultFromResponsiveValue } from "../../theme/responsiveValue.js";
-import { css } from "../../utils/css.js";
-const config = {
-    title: "Examples/TextWithImageEmail",
-    parameters: { mailRoot: false },
-};
-export default config;
-export const Default = {
-    render: () => {
-        const theme = createTheme({
-            text: {
-                defaultVariant: "body",
-                variants: {
-                    heading: { fontSize: "22px", lineHeight: "28px", fontWeight: "bold" },
-                    body: { fontSize: "16px", lineHeight: "24px" },
-                },
-            },
-        });
-        const IMAGE_WIDTH = 120;
-        const IMAGE_TEXT_GAP = 20;
-        registerStyles((theme) => css `
-                ${theme.breakpoints.default.belowMediaQuery} {
-                    .textWithImageEmail__textColumn {
-                        width: calc(100% - ${IMAGE_WIDTH}px) !important;
-                        max-width: calc(100% - ${IMAGE_WIDTH}px) !important;
-                    }
-                }
-
-                ${theme.breakpoints.mobile.belowMediaQuery} {
-                    .textWithImageEmail__imageColumn {
-                        margin-bottom: 10px;
-                    }
-
-                    .textWithImageEmail__textColumn {
-                        width: 100% !important;
-                        max-width: 100% !important;
-                    }
-
-                    .textWithImageEmail__textColumn > table > tbody > tr > td {
-                        padding-left: 0 !important;
-                    }
-                }
-            `);
-        const sectionIndent = getDefaultFromResponsiveValue(theme.sizes.contentIndentation);
-        const sectionInnerWidth = theme.sizes.bodyWidth - 2 * sectionIndent;
-        const textColumnWidth = sectionInnerWidth - IMAGE_WIDTH;
-        return (_jsxs(MjmlMailRoot, { theme: theme, children: [_jsx(MjmlSection, { backgroundColor: "#1a1a1a", indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlSpacer, { height: 15 }), _jsx(MjmlText, { color: "#ffffff", fontWeight: "bold", align: "center", children: "Company Name" }), _jsx(MjmlSpacer, { height: 15 })] }) }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) }), _jsxs(MjmlSection, { indent: true, children: [_jsx(MjmlColumn, { className: "textWithImageEmail__imageColumn", width: `${IMAGE_WIDTH}px`, verticalAlign: "middle", children: _jsx(MjmlImage, { src: `https://picsum.photos/seed/1/${IMAGE_WIDTH}/150`, alt: "Featured image", align: "center", width: IMAGE_WIDTH }) }), _jsxs(MjmlColumn, { className: "textWithImageEmail__textColumn", width: `${textColumnWidth}px`, paddingLeft: `${IMAGE_TEXT_GAP}px`, verticalAlign: "middle", children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Responsive Text-Image" }), _jsx(MjmlText, { children: "Demonstrates a responsive text-image layout with a fixed-width image column and a text column taking up remaining space." })] })] }), _jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlSpacer, { height: 30 }) }) })] }));
-    },
-};