email-builder-utils 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);

package/dist/types/ITemplate.d.ts

@@ -0,0 +1,38 @@
+export declare enum BlockType {
+    TEXT = "Text",
+    IMAGE = "Image",
+    BUTTON = "Button",
+    GRID = "Columns",
+    EMPTY = "EMPTY",
+    GRIDCELL = "Column",
+    SPACER = "Spacer",
+    DIVIDER = "Divider"
+}
+export declare enum visibility {
+    PUBLIC = "PUBLIC",
+    PRIVATE = "PRIVATE",
+    PRE_DEFINED = "PRE_DEFINED"
+}
+interface IProps {
+    imageUrl: string;
+    text: string;
+    rows: number;
+    columns: number;
+    textAlign: string;
+    navigateToUrl: string;
+    altText: string;
+    cellWidths: number[];
+}
+interface IStyle {
+    [key: string]: any;
+}
+export interface IBlockData {
+    type: BlockType;
+    data: {
+        style: IStyle;
+        props: IProps;
+        childrenIds: string[];
+    };
+}
+export {};
+//# sourceMappingURL=ITemplate.d.ts.map

package/dist/types/ITemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ITemplate.d.ts","sourceRoot":"","sources":["../../src/types/ITemplate.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,YAAY;IAChB,KAAK,UAAU;IACf,QAAQ,WAAW;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,UAAU,MAAM;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,UAAU,MAAM;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;CACH"}

package/dist/types/ITemplate.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visibility = exports.BlockType = void 0;
+var BlockType;
+(function (BlockType) {
+    BlockType["TEXT"] = "Text";
+    BlockType["IMAGE"] = "Image";
+    BlockType["BUTTON"] = "Button";
+    BlockType["GRID"] = "Columns";
+    BlockType["EMPTY"] = "EMPTY";
+    BlockType["GRIDCELL"] = "Column";
+    BlockType["SPACER"] = "Spacer";
+    BlockType["DIVIDER"] = "Divider";
+})(BlockType || (exports.BlockType = BlockType = {}));
+var visibility;
+(function (visibility) {
+    visibility["PUBLIC"] = "PUBLIC";
+    visibility["PRIVATE"] = "PRIVATE";
+    visibility["PRE_DEFINED"] = "PRE_DEFINED";
+})(visibility || (exports.visibility = visibility = {}));

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ITemplate";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/types/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ITemplate"), exports);

package/dist/utils/convertJsonToHtml.d.ts

@@ -0,0 +1,3 @@
+declare function convertJsonToHtml(jsonData: any): string;
+export default convertJsonToHtml;
+//# sourceMappingURL=convertJsonToHtml.d.ts.map

package/dist/utils/convertJsonToHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAIA,iBAAS,iBAAiB,CAAC,QAAQ,EAAE,GAAG,UAsCvC;AAED,eAAe,iBAAiB,CAAC"}

package/dist/utils/convertJsonToHtml.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const js_beautify_1 = require("js-beautify");
+const jsonToHTML_1 = require("./jsonToHTML");
+// @TODO: Update style of <table>, in frontend, useState was used
+function convertJsonToHtml(jsonData) {
+    const rootData = jsonData?.root?.data;
+    const blocksHtml = rootData?.childrenIds.map((childId) => (0, jsonToHTML_1.convertToHtml)(jsonData[childId], jsonData)).join("");
+    const rawHtml = `
+  <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Email Layout</title>
+      <style>
+        @media screen and (max-width: 600px) {
+          .ebr-table-wrapper {
+            width: 360px !important;
+            max-width: 360px !important;
+          }
+        }
+
+        @media screen and (min-width: 601px) {
+          .ebr-table-wrapper {
+            width: 600px !important;
+            max-width: 600px !important;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <table class="ebr-table-wrapper" style="font-family:${"Modern Sans"}; width:600px; max-width:600px;  margin:0 auto; background-color:${"#FFFFFF"}; color:${""}; ${"border-collapse:collapse; table-layout:fixed;"}">
+        <tbody>
+          <tr>
+            <td style="padding:0;">${blocksHtml}</td>
+          </tr>
+        </tbody>
+      </table>
+    </body>
+    </html>`;
+    return (0, js_beautify_1.html)(rawHtml, { indent_size: 2 });
+}
+exports.default = convertJsonToHtml;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./convertJsonToHtml";
+export * from "./jsonToHTML";
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./convertJsonToHtml"), exports);
+__exportStar(require("./jsonToHTML"), exports);

package/dist/utils/jsonToHTML.d.ts

@@ -0,0 +1,22 @@
+import { BlockType } from "../types";
+interface BlockJsonProps {
+    columns: number;
+    rows: number;
+    cellWidths: Array<number>;
+    navigateToUrl: string;
+    text: string;
+    altText: string;
+    imageUrl: string;
+}
+interface IBlockData {
+    type: BlockType;
+    data: {
+        props: BlockJsonProps;
+        style: any;
+        childrenIds?: Array<string>;
+    };
+}
+export declare const tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
+export declare function convertToHtml(blockData: IBlockData, rootData: any): string;
+export {};
+//# sourceMappingURL=jsonToHTML.d.ts.map

package/dist/utils/jsonToHTML.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AASrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAGD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AA4ChF,wBAAgB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,UAiBjE"}

package/dist/utils/jsonToHTML.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableCommonStyle = void 0;
+exports.convertToHtml = convertToHtml;
+const types_1 = require("../types");
+const addPxToAttributes = ["width", "height", "fontSize"];
+exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
+function cleanJson(obj) {
+    if (typeof obj !== "object" || obj === null)
+        return obj;
+    if (Array.isArray(obj)) {
+        return obj.map(cleanJson);
+    }
+    return Object.fromEntries(Object.entries(obj)
+        .filter(([_, value]) => value !== undefined && value !== null && value !== "")
+        .map(([key, value]) => [key, cleanJson(value)]));
+}
+function jsonToPlainString(obj) {
+    if (typeof obj !== "object" || obj === null)
+        return String(obj);
+    if (Array.isArray(obj)) {
+        return obj.map(jsonToPlainString).join(", ");
+    }
+    return Object.entries(obj)
+        .map(([key, value]) => `${key}:${jsonToPlainString(value)}; `)
+        .join("");
+}
+function buildStyles(style) {
+    const stylesObj = {};
+    Object.entries(style).forEach(([key, value]) => {
+        const appendPx = addPxToAttributes.includes(key);
+        if (value === undefined || value === null || value === "")
+            return null;
+        if ((key === "padding" || key === "buttonPadding") && typeof value === "object" && value !== null) {
+            const padding = value;
+            value = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+        }
+        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        return (stylesObj[cssKey] = appendPx ? `${value}px` : value);
+    });
+    return jsonToPlainString(cleanJson(stylesObj)).trim();
+}
+function convertToHtml(blockData, rootData) {
+    switch (blockData.type) {
+        case types_1.BlockType.TEXT:
+            return convertTextBlock(blockData);
+        case types_1.BlockType.IMAGE:
+            return convertImageBlock(blockData);
+        case types_1.BlockType.BUTTON:
+            return convertButtonBlock(blockData);
+        case types_1.BlockType.GRID:
+            return convertGridBlock(blockData, rootData);
+        case types_1.BlockType.DIVIDER:
+            return convertDividerBlockToHtml(blockData);
+        case types_1.BlockType.SPACER:
+            return convertSpacerBlockToHtml(blockData);
+        default:
+            return "";
+    }
+}
+function appendOutlookSupport(content, contentStyle) {
+    return `
+  <table width="100%" style="${exports.tableCommonStyle}">
+      <tr>
+        <td style="${contentStyle}">
+          ${content}
+         </td>
+      </tr>
+    </table>
+  `;
+}
+function convertDividerBlockToHtml(blockData) {
+    const { style } = blockData.data;
+    const { thickness, dividerColor, ...rest } = style;
+    const convertedStyle = buildStyles(rest);
+    return appendOutlookSupport(`<hr style="height:${thickness}px; background-color: ${dividerColor};" />`, convertedStyle);
+}
+function convertSpacerBlockToHtml(blockData) {
+    const { style } = blockData.data;
+    const styles = buildStyles(style);
+    return appendOutlookSupport(``, styles);
+}
+function convertTextBlock(blockData) {
+    const { style, props } = blockData.data;
+    const styles = buildStyles(style);
+    const text = props.text || "";
+    const navigateToUrl = props.navigateToUrl || "";
+    const textContent = appendOutlookSupport(text.replaceAll(/\n/g, "<br>"), styles);
+    return navigateToUrl ? `<a href="${navigateToUrl}" style="color:inherit; text-decoration:none; cursor:pointer;">${textContent}</a>` : textContent;
+}
+function appendOutlookForImage(content, imageStyle, imageUrl) {
+    return `
+  <!--[if mso]>
+    <v:rect xmlns:v="urn:schemas-microsoft-com:vml"
+      fill="t" stroke="f"
+      style="${imageStyle}">
+      <v:fill src="${imageUrl}" type="frame"/>
+    </v:rect>
+  <![endif]-->
+   <!--[if !mso]><!-->
+    ${content}
+  <!--<![endif]-->
+  `;
+}
+function convertImageBlock(blockData) {
+    const { style, props } = blockData.data;
+    const { altText, imageUrl, navigateToUrl } = props;
+    const { width, height, objectFit, ...containerStyle } = style;
+    const imageStyle = { width, height, objectFit };
+    const containerStyles = buildStyles(containerStyle);
+    const imageTagStyles = buildStyles(imageStyle);
+    const imageElement = `<img src="${imageUrl}" alt="${altText}" style="${imageTagStyles}" />`;
+    const imageContent = appendOutlookSupport(appendOutlookForImage(imageElement, imageTagStyles, imageUrl), containerStyles);
+    return navigateToUrl ? `<a href="${navigateToUrl}" target="_blank" style="display:block; text-decoration:none; cursor:pointer;">${imageContent}</a>` : imageContent;
+}
+function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
+    const { width, buttonColor, borderColor, borderRadius, borderWidth, height, buttonPadding, color, fontFamily, fontSize, fontWeight } = buttonStyle;
+    return `
+  <!--[if mso]>
+    <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}px" strokeweight="${borderWidth || 1}px" strokecolor="${borderColor || "transparent"}" fillcolor="${buttonColor || "none"}">
+    <w:anchorlock/>
+    <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}px">
+      <center style="font-family:${fontFamily || ""};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">${text}</center>
+    </v:textbox>
+    </v:${borderRadius ? "roundrect" : "rect"}>
+  <![endif]-->
+  <!--[if !mso]><!-->
+    ${content}
+  <!--<![endif]-->
+  `;
+}
+function convertButtonBlock(blockData) {
+    const { style, props } = blockData.data;
+    const { text, navigateToUrl } = props;
+    const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, textColor, buttonColor, ...rest } = style;
+    const buttonStyle = {
+        fontFamily,
+        fontSize,
+        fontWeight,
+        borderColor,
+        borderRadius,
+        borderWidth,
+        borderStyle,
+        padding: buttonPadding,
+        textColor,
+        backgroundColor: buttonColor,
+    };
+    const convertedButtonStyle = buildStyles(buttonStyle);
+    const convertedStyles = buildStyles(rest);
+    const buttonElement = `<a href="${navigateToUrl}" style="display:inline-block; text-decoration:none; cursor:pointer;"><button style="${convertedButtonStyle}">${text}</button></a>`;
+    const buttonContent = appendOutlookSupport(appendOutlookForButton(buttonElement, style, navigateToUrl, text), convertedStyles);
+    return buttonContent;
+}
+function convertGridBlock(blockData, rootData) {
+    const { style, childrenIds = [], props } = blockData.data;
+    const { columnGap, ...rest } = style;
+    const { rows, columns, cellWidths } = props;
+    const styles = buildStyles(rest);
+    const gridItems = [];
+    for (let colIndex = 0; colIndex < columns; colIndex++) {
+        const childId = childrenIds[colIndex];
+        const cellWidth = cellWidths ? cellWidths[colIndex] : 100 / columns;
+        const childBlockData = rootData[childId];
+        if (childBlockData) {
+            gridItems.push(convertGridCellBlock(childBlockData, rootData, cellWidth));
+        }
+    }
+    return `
+    <table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
+      <tbody>
+        <tr>${gridItems.join("")}</tr>
+      </tbody>
+    </table>
+  `;
+}
+function convertGridCellBlock(blockData, rootData, cellWidth) {
+    const { style, childrenIds } = blockData.data;
+    const styles = buildStyles(style);
+    const cellItems = childrenIds && childrenIds.length > 0 ? childrenIds.map((childId) => convertToHtml(rootData[childId], rootData)).join("") : "";
+    return `<td style="width:${cellWidth}% ; max-width:${cellWidth}%; ${styles}">${cellItems}</td>`;
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "email-builder-utils",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "start": "npm run build && node dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
+  },
+  "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
+  "description": "",
+  "dependencies": {
+    "js-beautify": "^1.15.4"
+  },
+  "devDependencies": {
+    "@types/js-beautify": "^1.14.3",
+    "@types/node": "^22.13.10",
+    "typescript": "^5.8.2"
+  }
+}