@cymbal/atoms-email-renderer 0.0.0 → 0.0.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 (4) hide show
  1. package/dist/index.cjs +38 -195
  2. package/dist/index.d.ts +8 -2
  3. package/dist/index.mjs +39 -196
  4. package/package.json +2 -4
package/dist/index.cjs CHANGED
@@ -2,183 +2,26 @@
2
2
 
3
3
  var components = require('@react-email/components');
4
4
  var React = require('react');
5
- var legos = require('@cymbal/legos');
6
- require('@primer/octicons-react');
7
- require('date-fns');
8
- require('date-fns-tz');
9
- require('slate');
10
- require('date-fns/addMinutes');
11
- require('date-fns/differenceInMinutes');
12
- require('date-fns/format');
13
- require('date-fns/addHours');
14
- require('date-fns/differenceInHours');
15
- require('date-fns/getHours');
16
- require('date-fns/getMinutes');
17
- require('date-fns/isValid');
18
- require('date-fns/parse');
19
- require('slate-react');
20
- require('uuid');
21
- require('@dnd-kit/core');
22
-
23
- const envVariables = {
24
- etixOAuth2Params: {
25
- clientId: process.env.ETIX_OAUTH2_CLIENT_ID ?? "",
26
- clientSecret: process.env.ETIX_OAUTH2_CLIENT_SECRET ?? "",
27
- redirectUri: "https://manager.cymbal.co/oauth2/etix/callback"
28
- },
29
- eventbriteOAuth2Params: {
30
- apiKey: process.env.EVENTBRITE_OAUTH2_API_KEY ?? "",
31
- clientSecret: process.env.EVENTBRITE_OAUTH2_CLIENT_SECRET ?? ""
32
- },
33
- shopifyOAuth2Params: {
34
- clientId: process.env.SHOPIFY_OAUTH2_CLIENT_ID ?? "",
35
- clientSecret: process.env.SHOPIFY_OAUTH2_CLIENT_SECRET ?? ""
36
- },
37
- universeOAuth2Params: {
38
- clientId: "26360beb48fefbbb4c45e0e4053123272a03fd4cf3eae54f5dd4620520c819d3",
39
- clientSecret: "4e46048f9a7c74271b9907f25663dd5d9131159b70dea225a6808f8d2200beab",
40
- redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
41
- },
42
- turnstileSecretKey: process.env.TURNSTILE_SECRET_KEY ?? ""
43
- };
44
- const envConfigRecord = {
45
- development: {
46
- ...envVariables,
47
- eventbriteOAuth2Params: {
48
- ...envVariables.eventbriteOAuth2Params,
49
- redirectUri: "http://localhost:3031/oauth2/eventbrite/callback"
50
- },
51
- shopifyOAuth2Params: {
52
- ...envVariables.shopifyOAuth2Params,
53
- redirectUri: "http://localhost:3031/oauth2/shopify/callback"
54
- },
55
- universeOAuth2Params: {
56
- ...envVariables.universeOAuth2Params,
57
- redirectUri: "https://localhost:3031/oauth2/universe/callback"
58
- },
59
- showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
60
- showclixEventBaseUrl: "https://www-demo.showclix.com/event"
61
- },
62
- staging: {
63
- ...envVariables,
64
- eventbriteOAuth2Params: {
65
- ...envVariables.eventbriteOAuth2Params,
66
- redirectUri: "https://staging-manager.cymbal.co/oauth2/eventbrite/callback"
67
- },
68
- shopifyOAuth2Params: {
69
- ...envVariables.shopifyOAuth2Params,
70
- redirectUri: "https://staging-manager.cymbal.co/oauth2/shopify/callback"
71
- },
72
- universeOAuth2Params: {
73
- ...envVariables.universeOAuth2Params,
74
- redirectUri: "https://staging-manager.cymbal.co/oauth2/universe/callback"
75
- },
76
- showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
77
- showclixEventBaseUrl: "https://www-demo.showclix.com/event"
78
- },
79
- production: {
80
- ...envVariables,
81
- eventbriteOAuth2Params: {
82
- ...envVariables.eventbriteOAuth2Params,
83
- redirectUri: "https://manager.cymbal.co/oauth2/eventbrite/callback"
84
- },
85
- shopifyOAuth2Params: {
86
- ...envVariables.shopifyOAuth2Params,
87
- redirectUri: "https://manager.cymbal.co/oauth2/shopify/callback"
88
- },
89
- universeOAuth2Params: {
90
- ...envVariables.universeOAuth2Params,
91
- redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
92
- },
93
- showclixLoginUrl: "https://admin.showclix.com/api/registration",
94
- showclixEventBaseUrl: "https://www.showclix.com/event"
95
- }
96
- };
97
- const configRecord = {
98
- development: {
99
- env: "development",
100
- host: "http://localhost:3031",
101
- apiHost: "http://localhost:8080",
102
- cachedApiHost: "http://localhost:8080",
103
- homepageHost: "http://localhost:3029",
104
- webHost: "http://localhost:3030",
105
- trackingHost: "http://localhost:8081",
106
- stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
107
- turnstileSiteKey: "1x00000000000000000000AA"
108
- // AA to always succeed, AB to always fail
109
- },
110
- staging: {
111
- env: "staging",
112
- host: "https://staging-manager.cymbal.co",
113
- apiHost: "https://staging-api.cymbal.co",
114
- cachedApiHost: "https://staging-cache-api.cymbal.co",
115
- homepageHost: "https://staging.cymbal.co",
116
- webHost: "https://staging-app.cymbal.co",
117
- trackingHost: "https://staging.cy.link",
118
- stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
119
- turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
120
- },
121
- production: {
122
- env: "production",
123
- host: "https://manager.cymbal.co",
124
- apiHost: "https://api.cymbal.co",
125
- cachedApiHost: "https://cache-api.cymbal.co",
126
- homepageHost: "https://cymbal.co",
127
- webHost: "https://app.cymbal.co",
128
- trackingHost: "https://cy.link",
129
- stripeApiKey: "pk_live_51LKSx9DUFJHrciOVruTpEgzJ8HU2rnpfUoBvSFrwULMpRCzLoVaEeLI4crV4GhykMN2cgNAmmVhLbXK2rMiBIASp00HdegT6uO",
130
- turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
131
- }
132
- };
133
- const getEnv = () => {
134
- switch (process.env.NEXT_PUBLIC_ENV) {
135
- case "production":
136
- case "staging":
137
- case "development":
138
- return process.env.NEXT_PUBLIC_ENV;
139
- default:
140
- return "development";
141
- }
142
- };
143
- configRecord[getEnv()] ?? configRecord["development"];
144
- envConfigRecord[getEnv()] ?? envConfigRecord["development"];
145
-
146
- const allMarksKeys = [
147
- "color",
148
- "fontWeight",
149
- "fontStyle",
150
- "textDecoration",
151
- "textTransform",
152
- "fontSize",
153
- "fontFamily",
154
- "lineHeight",
155
- "letterSpacing"
156
- ];
157
- new Set(allMarksKeys);
158
5
 
159
6
  const MIN_LAYOUT_BASIS = 1;
160
7
  const DEFAULT_LAYOUT_BASIS = 100;
161
8
 
162
- ({
163
- linkColor: legos.defaultStyles.page_style.link_color,
164
- pagesMaxWidth: legos.defaultStyles.page_style.pages_max_width,
165
- underlineLinks: legos.defaultStyles.page_style.underline_links
166
- });
167
- const zeroPadding = { top: 0, right: 0, bottom: 0, left: 0 };
168
- function normalizePadding(padding) {
169
- if (padding === null || padding === void 0) {
170
- return { ...zeroPadding };
171
- }
172
- return { ...zeroPadding, ...padding };
173
- }
174
9
  function resolveLayoutVisualStyleValue({
175
10
  override,
176
11
  global
177
12
  }) {
178
- if (override === void 0 || override === null) {
179
- return global;
13
+ return override === null || override === void 0 ? global : override;
14
+ }
15
+ function normalizePadding(padding) {
16
+ if (!padding) {
17
+ return { top: 0, right: 0, bottom: 0, left: 0 };
180
18
  }
181
- return override;
19
+ return {
20
+ top: padding.top ?? 0,
21
+ right: padding.right ?? 0,
22
+ bottom: padding.bottom ?? 0,
23
+ left: padding.left ?? 0
24
+ };
182
25
  }
183
26
  function mergeResolvedLayoutWidth(overrides, global) {
184
27
  if (overrides === null) {
@@ -383,10 +226,10 @@ function horizontalBorderInsetPx(border) {
383
226
  return 0;
384
227
  }
385
228
  function computeAtomContentWidth(boxWidth, layoutStyles) {
386
- const borderW = layoutStyles.border !== "none" ? horizontalBorderInsetPx(layoutStyles.border) : 0;
229
+ const borderWidth = layoutStyles.border !== "none" ? horizontalBorderInsetPx(layoutStyles.border) : 0;
387
230
  const padLeft = layoutStyles.padding?.left ?? 0;
388
231
  const padRight = layoutStyles.padding?.right ?? 0;
389
- return Math.max(0, boxWidth - padLeft - padRight - borderW);
232
+ return Math.max(0, boxWidth - padLeft - padRight - borderWidth);
390
233
  }
391
234
  function calculateRowChildWidth({
392
235
  contentWidth,
@@ -462,27 +305,6 @@ function calculateColumnChildWidths({
462
305
  }
463
306
  return widths;
464
307
  }
465
-
466
- const ATOM_SOCIAL_ORDINAL_TO_PLATFORM = {
467
- facebookOrdinal: "facebook",
468
- xOrdinal: "x",
469
- instagramOrdinal: "instagram",
470
- tiktokOrdinal: "tiktok",
471
- youtubeOrdinal: "youtube",
472
- websiteOrdinal: "website",
473
- spotifyOrdinal: "spotify",
474
- discordOrdinal: "discord",
475
- soundcloudOrdinal: "soundcloud",
476
- appleMusicOrdinal: "apple_music",
477
- threadsOrdinal: "threads"
478
- };
479
- Object.entries(ATOM_SOCIAL_ORDINAL_TO_PLATFORM).reduce(
480
- (accumulator, [ordinalKey, platform]) => {
481
- accumulator[platform] = ordinalKey;
482
- return accumulator;
483
- },
484
- {}
485
- );
486
308
  function ensureUrlHasProtocolForPreview(url) {
487
309
  const trimmed = url.trim();
488
310
  if (trimmed === "") {
@@ -941,7 +763,19 @@ const EmailColumnsAtom = ({ atom, ctx }) => {
941
763
  });
942
764
  return /* @__PURE__ */ React.createElement(components.Section, { style: outerTableStyle }, /* @__PURE__ */ React.createElement(components.Row, { style: innerRowStyle }, cells));
943
765
  };
944
- const AtomDocumentContentsEmail = ({ document: doc }) => {
766
+ const hiddenPreheaderStyle = {
767
+ display: "none",
768
+ fontSize: "1px",
769
+ lineHeight: "1px",
770
+ maxHeight: 0,
771
+ maxWidth: 0,
772
+ opacity: 0,
773
+ overflow: "hidden"
774
+ };
775
+ const AtomDocumentContentsEmail = ({
776
+ document: doc,
777
+ options
778
+ }) => {
945
779
  const webFonts = collectFontFamilies(doc);
946
780
  const ctx = {
947
781
  globalAtomStyles: doc.globalAtomStyles,
@@ -957,10 +791,19 @@ const AtomDocumentContentsEmail = ({ document: doc }) => {
957
791
  rel: "stylesheet",
958
792
  href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@100;200;300;400;500;600;700;800;900&display=swap`
959
793
  }
960
- ))), /* @__PURE__ */ React.createElement(components.Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, /* @__PURE__ */ React.createElement(components.Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }))));
794
+ ))), /* @__PURE__ */ React.createElement(components.Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(components.Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(components.Section, null, /* @__PURE__ */ React.createElement(components.Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(components.Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
795
+ components.Img,
796
+ {
797
+ src: options.trackingPixelUrl,
798
+ width: "1",
799
+ height: "1",
800
+ style: { display: "none", height: 1, width: 1 },
801
+ alt: ""
802
+ }
803
+ ) : null));
961
804
  };
962
- async function renderAtomDocumentToHtml(doc) {
963
- return components.render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc }));
805
+ async function renderAtomDocumentToHtml(doc, options) {
806
+ return components.render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc, options }));
964
807
  }
965
808
 
966
809
  exports.renderAtomDocumentToHtml = renderAtomDocumentToHtml;
package/dist/index.d.ts CHANGED
@@ -521,7 +521,13 @@ interface AtomTextEventStyle {
521
521
  dynamicDataSetting: AtomDynamicDataSetting;
522
522
  }
523
523
 
524
- declare function renderAtomDocumentToHtml(doc: AtomDocumentContents): Promise<string>;
524
+ interface RenderAtomDocumentToHtmlOptions {
525
+ automationPreviewHeaderHtml?: string | null;
526
+ cymbalBrandingUrl?: string | null;
527
+ emailPreviewText?: string | null;
528
+ trackingPixelUrl?: string | null;
529
+ }
530
+ declare function renderAtomDocumentToHtml(doc: AtomDocumentContents, options?: RenderAtomDocumentToHtmlOptions): Promise<string>;
525
531
 
526
532
  export { renderAtomDocumentToHtml };
527
- export type { Atom, AtomDocument, AutomationTriggeredEventAtom, AutomationUpcomingEventsAtom, ContestAtom, FormAtom, InputAtom, OptionAtom, QuestionAtom };
533
+ export type { Atom, AtomDocument, AtomDocumentContents, AutomationTriggeredEventAtom, AutomationUpcomingEventsAtom, ContestAtom, FormAtom, InputAtom, OptionAtom, QuestionAtom, RenderAtomDocumentToHtmlOptions };
package/dist/index.mjs CHANGED
@@ -1,182 +1,25 @@
1
- import { render, Html, Head, Body, Container, Section, Button, Text, Column, Row, Hr, Img, Link, Heading } from '@react-email/components';
1
+ import { render, Html, Head, Body, Container, Section, Text, Link, Img, Button, Column, Row, Hr, Heading } from '@react-email/components';
2
2
  import React from 'react';
3
- import { defaultStyles } from '@cymbal/legos';
4
- import '@primer/octicons-react';
5
- import 'date-fns';
6
- import 'date-fns-tz';
7
- import 'slate';
8
- import 'date-fns/addMinutes';
9
- import 'date-fns/differenceInMinutes';
10
- import 'date-fns/format';
11
- import 'date-fns/addHours';
12
- import 'date-fns/differenceInHours';
13
- import 'date-fns/getHours';
14
- import 'date-fns/getMinutes';
15
- import 'date-fns/isValid';
16
- import 'date-fns/parse';
17
- import 'slate-react';
18
- import 'uuid';
19
- import '@dnd-kit/core';
20
-
21
- const envVariables = {
22
- etixOAuth2Params: {
23
- clientId: process.env.ETIX_OAUTH2_CLIENT_ID ?? "",
24
- clientSecret: process.env.ETIX_OAUTH2_CLIENT_SECRET ?? "",
25
- redirectUri: "https://manager.cymbal.co/oauth2/etix/callback"
26
- },
27
- eventbriteOAuth2Params: {
28
- apiKey: process.env.EVENTBRITE_OAUTH2_API_KEY ?? "",
29
- clientSecret: process.env.EVENTBRITE_OAUTH2_CLIENT_SECRET ?? ""
30
- },
31
- shopifyOAuth2Params: {
32
- clientId: process.env.SHOPIFY_OAUTH2_CLIENT_ID ?? "",
33
- clientSecret: process.env.SHOPIFY_OAUTH2_CLIENT_SECRET ?? ""
34
- },
35
- universeOAuth2Params: {
36
- clientId: "26360beb48fefbbb4c45e0e4053123272a03fd4cf3eae54f5dd4620520c819d3",
37
- clientSecret: "4e46048f9a7c74271b9907f25663dd5d9131159b70dea225a6808f8d2200beab",
38
- redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
39
- },
40
- turnstileSecretKey: process.env.TURNSTILE_SECRET_KEY ?? ""
41
- };
42
- const envConfigRecord = {
43
- development: {
44
- ...envVariables,
45
- eventbriteOAuth2Params: {
46
- ...envVariables.eventbriteOAuth2Params,
47
- redirectUri: "http://localhost:3031/oauth2/eventbrite/callback"
48
- },
49
- shopifyOAuth2Params: {
50
- ...envVariables.shopifyOAuth2Params,
51
- redirectUri: "http://localhost:3031/oauth2/shopify/callback"
52
- },
53
- universeOAuth2Params: {
54
- ...envVariables.universeOAuth2Params,
55
- redirectUri: "https://localhost:3031/oauth2/universe/callback"
56
- },
57
- showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
58
- showclixEventBaseUrl: "https://www-demo.showclix.com/event"
59
- },
60
- staging: {
61
- ...envVariables,
62
- eventbriteOAuth2Params: {
63
- ...envVariables.eventbriteOAuth2Params,
64
- redirectUri: "https://staging-manager.cymbal.co/oauth2/eventbrite/callback"
65
- },
66
- shopifyOAuth2Params: {
67
- ...envVariables.shopifyOAuth2Params,
68
- redirectUri: "https://staging-manager.cymbal.co/oauth2/shopify/callback"
69
- },
70
- universeOAuth2Params: {
71
- ...envVariables.universeOAuth2Params,
72
- redirectUri: "https://staging-manager.cymbal.co/oauth2/universe/callback"
73
- },
74
- showclixLoginUrl: "https://admin-demo.showclix.com/api/registration",
75
- showclixEventBaseUrl: "https://www-demo.showclix.com/event"
76
- },
77
- production: {
78
- ...envVariables,
79
- eventbriteOAuth2Params: {
80
- ...envVariables.eventbriteOAuth2Params,
81
- redirectUri: "https://manager.cymbal.co/oauth2/eventbrite/callback"
82
- },
83
- shopifyOAuth2Params: {
84
- ...envVariables.shopifyOAuth2Params,
85
- redirectUri: "https://manager.cymbal.co/oauth2/shopify/callback"
86
- },
87
- universeOAuth2Params: {
88
- ...envVariables.universeOAuth2Params,
89
- redirectUri: "https://manager.cymbal.co/oauth2/universe/callback"
90
- },
91
- showclixLoginUrl: "https://admin.showclix.com/api/registration",
92
- showclixEventBaseUrl: "https://www.showclix.com/event"
93
- }
94
- };
95
- const configRecord = {
96
- development: {
97
- env: "development",
98
- host: "http://localhost:3031",
99
- apiHost: "http://localhost:8080",
100
- cachedApiHost: "http://localhost:8080",
101
- homepageHost: "http://localhost:3029",
102
- webHost: "http://localhost:3030",
103
- trackingHost: "http://localhost:8081",
104
- stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
105
- turnstileSiteKey: "1x00000000000000000000AA"
106
- // AA to always succeed, AB to always fail
107
- },
108
- staging: {
109
- env: "staging",
110
- host: "https://staging-manager.cymbal.co",
111
- apiHost: "https://staging-api.cymbal.co",
112
- cachedApiHost: "https://staging-cache-api.cymbal.co",
113
- homepageHost: "https://staging.cymbal.co",
114
- webHost: "https://staging-app.cymbal.co",
115
- trackingHost: "https://staging.cy.link",
116
- stripeApiKey: "pk_test_51LKSx9DUFJHrciOV6vQAOVOCPJWBZOPIQZ7MqDykKdRFk5oRGOc1OCZOzo3kIPJKr6tVr3jOJefmKZmiSMRPJtwq007p0vVP57",
117
- turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
118
- },
119
- production: {
120
- env: "production",
121
- host: "https://manager.cymbal.co",
122
- apiHost: "https://api.cymbal.co",
123
- cachedApiHost: "https://cache-api.cymbal.co",
124
- homepageHost: "https://cymbal.co",
125
- webHost: "https://app.cymbal.co",
126
- trackingHost: "https://cy.link",
127
- stripeApiKey: "pk_live_51LKSx9DUFJHrciOVruTpEgzJ8HU2rnpfUoBvSFrwULMpRCzLoVaEeLI4crV4GhykMN2cgNAmmVhLbXK2rMiBIASp00HdegT6uO",
128
- turnstileSiteKey: "0x4AAAAAADcxWmLeTC3FZ8Pt"
129
- }
130
- };
131
- const getEnv = () => {
132
- switch (process.env.NEXT_PUBLIC_ENV) {
133
- case "production":
134
- case "staging":
135
- case "development":
136
- return process.env.NEXT_PUBLIC_ENV;
137
- default:
138
- return "development";
139
- }
140
- };
141
- configRecord[getEnv()] ?? configRecord["development"];
142
- envConfigRecord[getEnv()] ?? envConfigRecord["development"];
143
-
144
- const allMarksKeys = [
145
- "color",
146
- "fontWeight",
147
- "fontStyle",
148
- "textDecoration",
149
- "textTransform",
150
- "fontSize",
151
- "fontFamily",
152
- "lineHeight",
153
- "letterSpacing"
154
- ];
155
- new Set(allMarksKeys);
156
3
 
157
4
  const MIN_LAYOUT_BASIS = 1;
158
5
  const DEFAULT_LAYOUT_BASIS = 100;
159
6
 
160
- ({
161
- linkColor: defaultStyles.page_style.link_color,
162
- pagesMaxWidth: defaultStyles.page_style.pages_max_width,
163
- underlineLinks: defaultStyles.page_style.underline_links
164
- });
165
- const zeroPadding = { top: 0, right: 0, bottom: 0, left: 0 };
166
- function normalizePadding(padding) {
167
- if (padding === null || padding === void 0) {
168
- return { ...zeroPadding };
169
- }
170
- return { ...zeroPadding, ...padding };
171
- }
172
7
  function resolveLayoutVisualStyleValue({
173
8
  override,
174
9
  global
175
10
  }) {
176
- if (override === void 0 || override === null) {
177
- return global;
11
+ return override === null || override === void 0 ? global : override;
12
+ }
13
+ function normalizePadding(padding) {
14
+ if (!padding) {
15
+ return { top: 0, right: 0, bottom: 0, left: 0 };
178
16
  }
179
- return override;
17
+ return {
18
+ top: padding.top ?? 0,
19
+ right: padding.right ?? 0,
20
+ bottom: padding.bottom ?? 0,
21
+ left: padding.left ?? 0
22
+ };
180
23
  }
181
24
  function mergeResolvedLayoutWidth(overrides, global) {
182
25
  if (overrides === null) {
@@ -381,10 +224,10 @@ function horizontalBorderInsetPx(border) {
381
224
  return 0;
382
225
  }
383
226
  function computeAtomContentWidth(boxWidth, layoutStyles) {
384
- const borderW = layoutStyles.border !== "none" ? horizontalBorderInsetPx(layoutStyles.border) : 0;
227
+ const borderWidth = layoutStyles.border !== "none" ? horizontalBorderInsetPx(layoutStyles.border) : 0;
385
228
  const padLeft = layoutStyles.padding?.left ?? 0;
386
229
  const padRight = layoutStyles.padding?.right ?? 0;
387
- return Math.max(0, boxWidth - padLeft - padRight - borderW);
230
+ return Math.max(0, boxWidth - padLeft - padRight - borderWidth);
388
231
  }
389
232
  function calculateRowChildWidth({
390
233
  contentWidth,
@@ -460,27 +303,6 @@ function calculateColumnChildWidths({
460
303
  }
461
304
  return widths;
462
305
  }
463
-
464
- const ATOM_SOCIAL_ORDINAL_TO_PLATFORM = {
465
- facebookOrdinal: "facebook",
466
- xOrdinal: "x",
467
- instagramOrdinal: "instagram",
468
- tiktokOrdinal: "tiktok",
469
- youtubeOrdinal: "youtube",
470
- websiteOrdinal: "website",
471
- spotifyOrdinal: "spotify",
472
- discordOrdinal: "discord",
473
- soundcloudOrdinal: "soundcloud",
474
- appleMusicOrdinal: "apple_music",
475
- threadsOrdinal: "threads"
476
- };
477
- Object.entries(ATOM_SOCIAL_ORDINAL_TO_PLATFORM).reduce(
478
- (accumulator, [ordinalKey, platform]) => {
479
- accumulator[platform] = ordinalKey;
480
- return accumulator;
481
- },
482
- {}
483
- );
484
306
  function ensureUrlHasProtocolForPreview(url) {
485
307
  const trimmed = url.trim();
486
308
  if (trimmed === "") {
@@ -939,7 +761,19 @@ const EmailColumnsAtom = ({ atom, ctx }) => {
939
761
  });
940
762
  return /* @__PURE__ */ React.createElement(Section, { style: outerTableStyle }, /* @__PURE__ */ React.createElement(Row, { style: innerRowStyle }, cells));
941
763
  };
942
- const AtomDocumentContentsEmail = ({ document: doc }) => {
764
+ const hiddenPreheaderStyle = {
765
+ display: "none",
766
+ fontSize: "1px",
767
+ lineHeight: "1px",
768
+ maxHeight: 0,
769
+ maxWidth: 0,
770
+ opacity: 0,
771
+ overflow: "hidden"
772
+ };
773
+ const AtomDocumentContentsEmail = ({
774
+ document: doc,
775
+ options
776
+ }) => {
943
777
  const webFonts = collectFontFamilies(doc);
944
778
  const ctx = {
945
779
  globalAtomStyles: doc.globalAtomStyles,
@@ -955,10 +789,19 @@ const AtomDocumentContentsEmail = ({ document: doc }) => {
955
789
  rel: "stylesheet",
956
790
  href: `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@100;200;300;400;500;600;700;800;900&display=swap`
957
791
  }
958
- ))), /* @__PURE__ */ React.createElement(Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }))));
792
+ ))), /* @__PURE__ */ React.createElement(Body, { style: { backgroundColor: bodyBackgroundColor, margin: 0, padding: 0 } }, options?.emailPreviewText ? /* @__PURE__ */ React.createElement("div", { style: hiddenPreheaderStyle }, options.emailPreviewText) : null, options?.automationPreviewHeaderHtml ? /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: options.automationPreviewHeaderHtml } }) : null, /* @__PURE__ */ React.createElement(Container, { style: { maxWidth: doc.maxWidth, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(EmailRowsAtom, { atom: doc.rootRow, ctx }), options?.cymbalBrandingUrl ? /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Text, { style: { color: "#999999", fontSize: 12, textAlign: "center" } }, "Powered by", " ", /* @__PURE__ */ React.createElement(Link, { href: options.cymbalBrandingUrl, style: { color: "#999999" } }, "Cymbal"))) : null), options?.trackingPixelUrl ? /* @__PURE__ */ React.createElement(
793
+ Img,
794
+ {
795
+ src: options.trackingPixelUrl,
796
+ width: "1",
797
+ height: "1",
798
+ style: { display: "none", height: 1, width: 1 },
799
+ alt: ""
800
+ }
801
+ ) : null));
959
802
  };
960
- async function renderAtomDocumentToHtml(doc) {
961
- return render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc }));
803
+ async function renderAtomDocumentToHtml(doc, options) {
804
+ return render(/* @__PURE__ */ React.createElement(AtomDocumentContentsEmail, { document: doc, options }));
962
805
  }
963
806
 
964
807
  export { renderAtomDocumentToHtml };
package/package.json CHANGED
@@ -1,12 +1,10 @@
1
1
  {
2
2
  "name": "@cymbal/atoms-email-renderer",
3
- "version": "0.0.0",
3
+ "version": "0.0.1",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
7
- "files": [
8
- "dist"
9
- ],
7
+ "files": ["dist"],
10
8
  "publishConfig": {
11
9
  "access": "public"
12
10
  },