@sqrzro/ui 4.0.0-alpha.64 → 4.0.0-alpha.66

package/dist/mail/Mail/index.d.ts

@@ -2,7 +2,7 @@ import { DeepPartial } from '@sqrzro/utility';
 import { MailConfigObject } from '../utility/interfaces';
 export interface MailProps extends DeepPartial<MailConfigObject> {
     children: React.ReactNode;
-    title: string;
+    title?: string;
 }
 declare function Mail({ children, logo, styles, title, }: Readonly<MailProps>): Promise<React.ReactElement>;
 export default Mail;

package/dist/mail/Mail/index.js

@@ -1,10 +1,10 @@
 'use server';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import getMailConfig from '../utility/get-mail-config';
+import { setMailConfig } from '../utility/mail-config';
 const HALF = 2;
 async function Mail({ children, logo, styles, title, }) {
-    const mailConfig = getMailConfig({ styles });
+    const mailConfig = setMailConfig({ styles });
     const logoData = await (await import('../utility/convert-to-datauri')).default(logo ?? mailConfig.logo ?? '');
     return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("style", { dangerouslySetInnerHTML: {
                             __html: `
@@ -64,14 +64,16 @@ async function Mail({ children, logo, styles, title, }) {
                                                                 }, width: mailConfig.styles.panel.padding }), _jsx("td", { style: {
                                                                     backgroundColor: mailConfig.styles.panel.backgroundColor,
                                                                 }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [logoData ? (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: 240, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { children: _jsx("img", { alt: "Logo", src: logoData, width: 240 }) }) }) }) }) }) }), _jsx("tr", { children: _jsx("td", { height: mailConfig.styles.panel
-                                                                                                .padding }) })] })) : null, _jsx("tr", { children: _jsx("td", { style: {
-                                                                                        color: mailConfig.styles.title
-                                                                                            .color,
-                                                                                        fontSize: mailConfig.styles.title
-                                                                                            .fontSize,
-                                                                                        fontWeight: mailConfig.styles.title
-                                                                                            .fontWeight,
-                                                                                    }, children: title }) }), _jsx("tr", { children: _jsx("td", { height: mailConfig.styles.panel.padding }) }), _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: {
+                                                                                                .padding }) })] })) : null, title ? (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { style: {
+                                                                                                color: mailConfig.styles
+                                                                                                    .title.color,
+                                                                                                fontSize: mailConfig.styles
+                                                                                                    .title.fontSize,
+                                                                                                fontWeight: mailConfig.styles
+                                                                                                    .title
+                                                                                                    .fontWeight,
+                                                                                            }, children: title }) }), _jsx("tr", { children: _jsx("td", { height: mailConfig.styles.panel
+                                                                                                .padding }) })] })) : null, _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: {
                                                                     backgroundColor: mailConfig.styles.panel.backgroundColor,
                                                                 }, width: mailConfig.styles.panel.padding })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", height: mailConfig.styles.panel.padding, style: {
                                                                     backgroundColor: mailConfig.styles.panel.backgroundColor,

package/dist/mail/MailButton/index.js

@@ -1,12 +1,13 @@
 'use server';
 import { jsx as _jsx } from "react/jsx-runtime";
-import getMailConfig from '../utility/get-mail-config';
+import { getMailConfig } from '../utility/mail-config';
 function calculateWidth(text) {
     const characterWidth = 8;
     const padding = 50;
     return text.length * characterWidth + padding;
 }
 async function MailButton({ children, href, styles, }) {
+    console.log('MailButton', { children, href, styles });
     const mailConfig = getMailConfig({ styles });
     const calculatedWidth = calculateWidth(children);
     return (_jsx("div", { dangerouslySetInnerHTML: {

package/dist/mail/utility/convert-to-datauri.js

@@ -1,11 +1,32 @@
 'use server';
 import fs from 'node:fs';
 import path from 'node:path';
+function isURL(value) {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+async function read(fileName) {
+    if (isURL(fileName)) {
+        const response = await fetch(fileName);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${fileName}: ${response.status}`);
+        }
+        return Buffer.from(await response.arrayBuffer());
+    }
+    return fs.readFileSync(fileName);
+}
 async function convertToDataURI(fileName) {
     try {
-        const filePath = path.join(process.cwd(), fileName);
+        const filePath = path.isAbsolute(fileName) || isURL(fileName)
+            ? fileName
+            : path.join(process.cwd(), fileName);
         const mimeType = 'image/' + path.extname(filePath).slice(1);
-        const imageData = fs.readFileSync(filePath);
+        const imageData = await read(filePath);
         const base64Image = Buffer.from(imageData).toString('base64');
         return Promise.resolve(`data:${mimeType};base64,${base64Image}`);
     }

package/dist/mail/utility/mail-config.d.ts

@@ -0,0 +1,4 @@
+import type { DeepPartial } from '@sqrzro/utility';
+import type { MailConfigObject } from './interfaces';
+export declare function setMailConfig(overrides?: DeepPartial<MailConfigObject>): MailConfigObject;
+export declare function getMailConfig(overrides?: DeepPartial<MailConfigObject>): MailConfigObject;

package/dist/mail/utility/{get-mail-config.js → mail-config.js}

@@ -1,4 +1,5 @@
 import { deepMerge } from '@sqrzro/utility';
+import { cache } from 'react';
 const DEFAULT_STYLES = {
     styles: {
         button: {
@@ -21,14 +22,21 @@ const DEFAULT_STYLES = {
         },
     },
 };
-function getMailConfig(overrides) {
+const context = cache(() => new Map());
+const global = context();
+export function setMailConfig(overrides) {
     const string = process.env.MAIL_CONFIG || '{}';
     try {
         const object = JSON.parse(string);
-        return deepMerge(DEFAULT_STYLES, object, overrides || {});
+        global.set('mail', deepMerge(DEFAULT_STYLES, object, overrides || {}));
     }
     catch (err) {
-        return deepMerge(DEFAULT_STYLES, overrides || {});
+        global.set('mail', deepMerge(DEFAULT_STYLES, overrides || {}));
     }
+    return global.get('mail');
+}
+export function getMailConfig(overrides) {
+    return global.has('mail')
+        ? deepMerge(DEFAULT_STYLES, global.get('mail'), overrides || {})
+        : deepMerge(DEFAULT_STYLES, overrides || {});
 }
-export default getMailConfig;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.64",
+  "version": "4.0.0-alpha.66",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -57,8 +57,8 @@
     "react-dom": "^19.2.4",
     "tailwind-merge": "^3.5.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.19",
-    "@sqrzro/addons": "^4.0.0-alpha.10"
+    "@sqrzro/addons": "^4.0.0-alpha.10",
+    "@sqrzro/utility": "^4.0.0-alpha.19"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.3.1",

package/dist/mail/utility/get-mail-config.d.ts

@@ -1,4 +0,0 @@
-import type { DeepPartial } from '@sqrzro/utility';
-import type { MailConfigObject } from './interfaces';
-declare function getMailConfig(overrides?: DeepPartial<MailConfigObject>): MailConfigObject;
-export default getMailConfig;