@usewaypoint/email-builder 0.0.3 → 0.0.5

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 (39) hide show
  1. package/LICENSE +3 -1
  2. package/dist/{Reader/core.d.ts → index.d.mts} +17 -9
  3. package/dist/index.d.ts +1842 -3
  4. package/dist/index.js +297 -7
  5. package/dist/index.mjs +263 -0
  6. package/package.json +23 -15
  7. package/dist/Reader/core.d.ts.map +0 -1
  8. package/dist/Reader/core.js +0 -80
  9. package/dist/Reader/core.js.map +0 -1
  10. package/dist/blocks/ColumnsContainer/ColumnsContainerPropsSchema.d.ts +0 -136
  11. package/dist/blocks/ColumnsContainer/ColumnsContainerPropsSchema.d.ts.map +0 -1
  12. package/dist/blocks/ColumnsContainer/ColumnsContainerPropsSchema.js +0 -16
  13. package/dist/blocks/ColumnsContainer/ColumnsContainerPropsSchema.js.map +0 -1
  14. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.d.ts +0 -4
  15. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.d.ts.map +0 -1
  16. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.js +0 -23
  17. package/dist/blocks/ColumnsContainer/ColumnsContainerReader.js.map +0 -1
  18. package/dist/blocks/Container/ContainerPropsSchema.d.ts +0 -83
  19. package/dist/blocks/Container/ContainerPropsSchema.d.ts.map +0 -1
  20. package/dist/blocks/Container/ContainerPropsSchema.js +0 -12
  21. package/dist/blocks/Container/ContainerPropsSchema.js.map +0 -1
  22. package/dist/blocks/Container/ContainerReader.d.ts +0 -4
  23. package/dist/blocks/Container/ContainerReader.d.ts.map +0 -1
  24. package/dist/blocks/Container/ContainerReader.js +0 -9
  25. package/dist/blocks/Container/ContainerReader.js.map +0 -1
  26. package/dist/blocks/EmailLayout/EmailLayoutPropsSchema.d.ts +0 -22
  27. package/dist/blocks/EmailLayout/EmailLayoutPropsSchema.d.ts.map +0 -1
  28. package/dist/blocks/EmailLayout/EmailLayoutPropsSchema.js +0 -28
  29. package/dist/blocks/EmailLayout/EmailLayoutPropsSchema.js.map +0 -1
  30. package/dist/blocks/EmailLayout/EmailLayoutReader.d.ts +0 -4
  31. package/dist/blocks/EmailLayout/EmailLayoutReader.d.ts.map +0 -1
  32. package/dist/blocks/EmailLayout/EmailLayoutReader.js +0 -51
  33. package/dist/blocks/EmailLayout/EmailLayoutReader.js.map +0 -1
  34. package/dist/index.d.ts.map +0 -1
  35. package/dist/index.js.map +0 -1
  36. package/dist/renderers/renderToStaticMarkup.d.ts +0 -7
  37. package/dist/renderers/renderToStaticMarkup.d.ts.map +0 -1
  38. package/dist/renderers/renderToStaticMarkup.js +0 -10
  39. package/dist/renderers/renderToStaticMarkup.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,7 +1,297 @@
1
- export { default as renderToStaticMarkup } from './renderers/renderToStaticMarkup';
2
- export { ReaderBlockSchema,
3
- //
4
- ReaderDocumentSchema,
5
- //
6
- ReaderBlock, default as Reader, } from './Reader/core';
7
- //# sourceMappingURL=index.js.map
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/index.ts
60
+ var src_exports = {};
61
+ __export(src_exports, {
62
+ Reader: () => Reader,
63
+ ReaderBlock: () => ReaderBlock,
64
+ ReaderBlockSchema: () => ReaderBlockSchema,
65
+ ReaderDocumentSchema: () => ReaderDocumentSchema,
66
+ renderToStaticMarkup: () => renderToStaticMarkup
67
+ });
68
+ module.exports = __toCommonJS(src_exports);
69
+
70
+ // src/renderers/renderToStaticMarkup.tsx
71
+ var import_react5 = __toESM(require("react"));
72
+ var import_server = require("react-dom/server");
73
+
74
+ // src/Reader/core.tsx
75
+ var import_react4 = __toESM(require("react"));
76
+ var import_zod4 = require("zod");
77
+ var import_block_avatar = require("@usewaypoint/block-avatar");
78
+ var import_block_button = require("@usewaypoint/block-button");
79
+ var import_block_divider = require("@usewaypoint/block-divider");
80
+ var import_block_heading = require("@usewaypoint/block-heading");
81
+ var import_block_html = require("@usewaypoint/block-html");
82
+ var import_block_image = require("@usewaypoint/block-image");
83
+ var import_block_spacer = require("@usewaypoint/block-spacer");
84
+ var import_block_text = require("@usewaypoint/block-text");
85
+ var import_document_core = require("@usewaypoint/document-core");
86
+
87
+ // src/blocks/ColumnsContainer/ColumnsContainerPropsSchema.ts
88
+ var import_zod = require("zod");
89
+ var import_block_columns_container = require("@usewaypoint/block-columns-container");
90
+ var BasePropsShape = import_block_columns_container.ColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
91
+ var ColumnsContainerPropsSchema = import_zod.z.object({
92
+ style: import_block_columns_container.ColumnsContainerPropsSchema.shape.style,
93
+ props: import_zod.z.object(__spreadProps(__spreadValues({}, BasePropsShape), {
94
+ columns: import_zod.z.tuple([
95
+ import_zod.z.object({ childrenIds: import_zod.z.array(import_zod.z.string()) }),
96
+ import_zod.z.object({ childrenIds: import_zod.z.array(import_zod.z.string()) }),
97
+ import_zod.z.object({ childrenIds: import_zod.z.array(import_zod.z.string()) })
98
+ ])
99
+ })).optional().nullable()
100
+ });
101
+ var ColumnsContainerPropsSchema_default = ColumnsContainerPropsSchema;
102
+
103
+ // src/blocks/ColumnsContainer/ColumnsContainerReader.tsx
104
+ var import_react = __toESM(require("react"));
105
+ var import_block_columns_container2 = require("@usewaypoint/block-columns-container");
106
+ function ColumnsContainerReader({ style, props }) {
107
+ const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
108
+ let cols = void 0;
109
+ if (columns) {
110
+ cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ import_react.default.createElement(ReaderBlock, { key: childId, id: childId })));
111
+ }
112
+ return /* @__PURE__ */ import_react.default.createElement(import_block_columns_container2.ColumnsContainer, { props: restProps, columns: cols, style });
113
+ }
114
+
115
+ // src/blocks/Container/ContainerPropsSchema.tsx
116
+ var import_zod2 = require("zod");
117
+ var import_block_container = require("@usewaypoint/block-container");
118
+ var ContainerPropsSchema = import_zod2.z.object({
119
+ style: import_block_container.ContainerPropsSchema.shape.style,
120
+ props: import_zod2.z.object({
121
+ childrenIds: import_zod2.z.array(import_zod2.z.string()).optional().nullable()
122
+ }).optional().nullable()
123
+ });
124
+
125
+ // src/blocks/Container/ContainerReader.tsx
126
+ var import_react2 = __toESM(require("react"));
127
+ var import_block_container2 = require("@usewaypoint/block-container");
128
+ function ContainerReader({ style, props }) {
129
+ var _a;
130
+ const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
131
+ return /* @__PURE__ */ import_react2.default.createElement(import_block_container2.Container, { style }, childrenIds.map((childId) => /* @__PURE__ */ import_react2.default.createElement(ReaderBlock, { key: childId, id: childId })));
132
+ }
133
+
134
+ // src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
135
+ var import_zod3 = require("zod");
136
+ var COLOR_SCHEMA = import_zod3.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
137
+ var FONT_FAMILY_SCHEMA = import_zod3.z.enum([
138
+ "MODERN_SANS",
139
+ "BOOK_SANS",
140
+ "ORGANIC_SANS",
141
+ "GEOMETRIC_SANS",
142
+ "HEAVY_SANS",
143
+ "ROUNDED_SANS",
144
+ "MODERN_SERIF",
145
+ "BOOK_SERIF",
146
+ "MONOSPACE"
147
+ ]).nullable().optional();
148
+ var EmailLayoutPropsSchema = import_zod3.z.object({
149
+ backdropColor: COLOR_SCHEMA,
150
+ canvasColor: COLOR_SCHEMA,
151
+ textColor: COLOR_SCHEMA,
152
+ fontFamily: FONT_FAMILY_SCHEMA,
153
+ childrenIds: import_zod3.z.array(import_zod3.z.string()).optional().nullable()
154
+ });
155
+
156
+ // src/blocks/EmailLayout/EmailLayoutReader.tsx
157
+ var import_react3 = __toESM(require("react"));
158
+ function getFontFamily(fontFamily) {
159
+ const f = fontFamily != null ? fontFamily : "MODERN_SANS";
160
+ switch (f) {
161
+ case "MODERN_SANS":
162
+ return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
163
+ case "BOOK_SANS":
164
+ return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
165
+ case "ORGANIC_SANS":
166
+ return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
167
+ case "GEOMETRIC_SANS":
168
+ return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
169
+ case "HEAVY_SANS":
170
+ return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
171
+ case "ROUNDED_SANS":
172
+ return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
173
+ case "MODERN_SERIF":
174
+ return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
175
+ case "BOOK_SERIF":
176
+ return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
177
+ case "MONOSPACE":
178
+ return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
179
+ }
180
+ }
181
+ function EmailLayoutReader(props) {
182
+ var _a, _b, _c, _d;
183
+ const childrenIds = (_a = props.childrenIds) != null ? _a : [];
184
+ return /* @__PURE__ */ import_react3.default.createElement(
185
+ "div",
186
+ {
187
+ style: {
188
+ backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
189
+ color: (_c = props.textColor) != null ? _c : "#262626",
190
+ fontFamily: getFontFamily(props.fontFamily),
191
+ fontSize: "16px",
192
+ fontWeight: "400",
193
+ letterSpacing: "0.15008px",
194
+ lineHeight: "1.5",
195
+ margin: "0",
196
+ padding: "32px 0",
197
+ minHeight: "100%",
198
+ width: "100%"
199
+ }
200
+ },
201
+ /* @__PURE__ */ import_react3.default.createElement(
202
+ "table",
203
+ {
204
+ align: "center",
205
+ width: "100%",
206
+ style: {
207
+ margin: "0 auto",
208
+ maxWidth: "600px",
209
+ backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF"
210
+ },
211
+ role: "presentation",
212
+ cellSpacing: "0",
213
+ cellPadding: "0",
214
+ border: 0
215
+ },
216
+ /* @__PURE__ */ import_react3.default.createElement("tbody", null, /* @__PURE__ */ import_react3.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ import_react3.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ import_react3.default.createElement(ReaderBlock, { key: childId, id: childId })))))
217
+ )
218
+ );
219
+ }
220
+
221
+ // src/Reader/core.tsx
222
+ var ReaderContext = (0, import_react4.createContext)({});
223
+ function useReaderDocument() {
224
+ return (0, import_react4.useContext)(ReaderContext);
225
+ }
226
+ var READER_DICTIONARY = (0, import_document_core.buildBlockConfigurationDictionary)({
227
+ ColumnsContainer: {
228
+ schema: ColumnsContainerPropsSchema_default,
229
+ Component: ColumnsContainerReader
230
+ },
231
+ Container: {
232
+ schema: ContainerPropsSchema,
233
+ Component: ContainerReader
234
+ },
235
+ EmailLayout: {
236
+ schema: EmailLayoutPropsSchema,
237
+ Component: EmailLayoutReader
238
+ },
239
+ //
240
+ Avatar: {
241
+ schema: import_block_avatar.AvatarPropsSchema,
242
+ Component: import_block_avatar.Avatar
243
+ },
244
+ Button: {
245
+ schema: import_block_button.ButtonPropsSchema,
246
+ Component: import_block_button.Button
247
+ },
248
+ Divider: {
249
+ schema: import_block_divider.DividerPropsSchema,
250
+ Component: import_block_divider.Divider
251
+ },
252
+ Heading: {
253
+ schema: import_block_heading.HeadingPropsSchema,
254
+ Component: import_block_heading.Heading
255
+ },
256
+ Html: {
257
+ schema: import_block_html.HtmlPropsSchema,
258
+ Component: import_block_html.Html
259
+ },
260
+ Image: {
261
+ schema: import_block_image.ImagePropsSchema,
262
+ Component: import_block_image.Image
263
+ },
264
+ Spacer: {
265
+ schema: import_block_spacer.SpacerPropsSchema,
266
+ Component: import_block_spacer.Spacer
267
+ },
268
+ Text: {
269
+ schema: import_block_text.TextPropsSchema,
270
+ Component: import_block_text.Text
271
+ }
272
+ });
273
+ var ReaderBlockSchema = (0, import_document_core.buildBlockConfigurationSchema)(READER_DICTIONARY);
274
+ var ReaderDocumentSchema = import_zod4.z.record(import_zod4.z.string(), ReaderBlockSchema);
275
+ var BaseReaderBlock = (0, import_document_core.buildBlockComponent)(READER_DICTIONARY);
276
+ function ReaderBlock({ id }) {
277
+ const document = useReaderDocument();
278
+ return /* @__PURE__ */ import_react4.default.createElement(BaseReaderBlock, __spreadValues({}, document[id]));
279
+ }
280
+ function Reader({ document, rootBlockId }) {
281
+ return /* @__PURE__ */ import_react4.default.createElement(ReaderContext.Provider, { value: document }, /* @__PURE__ */ import_react4.default.createElement(ReaderBlock, { id: rootBlockId }));
282
+ }
283
+
284
+ // src/renderers/renderToStaticMarkup.tsx
285
+ function renderToStaticMarkup(document, { rootBlockId }) {
286
+ return "<!DOCTYPE html>" + (0, import_server.renderToStaticMarkup)(
287
+ /* @__PURE__ */ import_react5.default.createElement("html", null, /* @__PURE__ */ import_react5.default.createElement("body", null, /* @__PURE__ */ import_react5.default.createElement(Reader, { document, rootBlockId })))
288
+ );
289
+ }
290
+ // Annotate the CommonJS export names for ESM import in node:
291
+ 0 && (module.exports = {
292
+ Reader,
293
+ ReaderBlock,
294
+ ReaderBlockSchema,
295
+ ReaderDocumentSchema,
296
+ renderToStaticMarkup
297
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,263 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
33
+ // src/renderers/renderToStaticMarkup.tsx
34
+ import React5 from "react";
35
+ import { renderToStaticMarkup as baseRenderToStaticMarkup } from "react-dom/server";
36
+
37
+ // src/Reader/core.tsx
38
+ import React4, { createContext, useContext } from "react";
39
+ import { z as z4 } from "zod";
40
+ import { Avatar, AvatarPropsSchema } from "@usewaypoint/block-avatar";
41
+ import { Button, ButtonPropsSchema } from "@usewaypoint/block-button";
42
+ import { Divider, DividerPropsSchema } from "@usewaypoint/block-divider";
43
+ import { Heading, HeadingPropsSchema } from "@usewaypoint/block-heading";
44
+ import { Html, HtmlPropsSchema } from "@usewaypoint/block-html";
45
+ import { Image, ImagePropsSchema } from "@usewaypoint/block-image";
46
+ import { Spacer, SpacerPropsSchema } from "@usewaypoint/block-spacer";
47
+ import { Text, TextPropsSchema } from "@usewaypoint/block-text";
48
+ import {
49
+ buildBlockComponent,
50
+ buildBlockConfigurationDictionary,
51
+ buildBlockConfigurationSchema
52
+ } from "@usewaypoint/document-core";
53
+
54
+ // src/blocks/ColumnsContainer/ColumnsContainerPropsSchema.ts
55
+ import { z } from "zod";
56
+ import { ColumnsContainerPropsSchema as BaseColumnsContainerPropsSchema } from "@usewaypoint/block-columns-container";
57
+ var BasePropsShape = BaseColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
58
+ var ColumnsContainerPropsSchema = z.object({
59
+ style: BaseColumnsContainerPropsSchema.shape.style,
60
+ props: z.object(__spreadProps(__spreadValues({}, BasePropsShape), {
61
+ columns: z.tuple([
62
+ z.object({ childrenIds: z.array(z.string()) }),
63
+ z.object({ childrenIds: z.array(z.string()) }),
64
+ z.object({ childrenIds: z.array(z.string()) })
65
+ ])
66
+ })).optional().nullable()
67
+ });
68
+ var ColumnsContainerPropsSchema_default = ColumnsContainerPropsSchema;
69
+
70
+ // src/blocks/ColumnsContainer/ColumnsContainerReader.tsx
71
+ import React from "react";
72
+ import { ColumnsContainer as BaseColumnsContainer } from "@usewaypoint/block-columns-container";
73
+ function ColumnsContainerReader({ style, props }) {
74
+ const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
75
+ let cols = void 0;
76
+ if (columns) {
77
+ cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React.createElement(ReaderBlock, { key: childId, id: childId })));
78
+ }
79
+ return /* @__PURE__ */ React.createElement(BaseColumnsContainer, { props: restProps, columns: cols, style });
80
+ }
81
+
82
+ // src/blocks/Container/ContainerPropsSchema.tsx
83
+ import { z as z2 } from "zod";
84
+ import { ContainerPropsSchema as BaseContainerPropsSchema } from "@usewaypoint/block-container";
85
+ var ContainerPropsSchema = z2.object({
86
+ style: BaseContainerPropsSchema.shape.style,
87
+ props: z2.object({
88
+ childrenIds: z2.array(z2.string()).optional().nullable()
89
+ }).optional().nullable()
90
+ });
91
+
92
+ // src/blocks/Container/ContainerReader.tsx
93
+ import React2 from "react";
94
+ import { Container as BaseContainer } from "@usewaypoint/block-container";
95
+ function ContainerReader({ style, props }) {
96
+ var _a;
97
+ const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
98
+ return /* @__PURE__ */ React2.createElement(BaseContainer, { style }, childrenIds.map((childId) => /* @__PURE__ */ React2.createElement(ReaderBlock, { key: childId, id: childId })));
99
+ }
100
+
101
+ // src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
102
+ import { z as z3 } from "zod";
103
+ var COLOR_SCHEMA = z3.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
104
+ var FONT_FAMILY_SCHEMA = z3.enum([
105
+ "MODERN_SANS",
106
+ "BOOK_SANS",
107
+ "ORGANIC_SANS",
108
+ "GEOMETRIC_SANS",
109
+ "HEAVY_SANS",
110
+ "ROUNDED_SANS",
111
+ "MODERN_SERIF",
112
+ "BOOK_SERIF",
113
+ "MONOSPACE"
114
+ ]).nullable().optional();
115
+ var EmailLayoutPropsSchema = z3.object({
116
+ backdropColor: COLOR_SCHEMA,
117
+ canvasColor: COLOR_SCHEMA,
118
+ textColor: COLOR_SCHEMA,
119
+ fontFamily: FONT_FAMILY_SCHEMA,
120
+ childrenIds: z3.array(z3.string()).optional().nullable()
121
+ });
122
+
123
+ // src/blocks/EmailLayout/EmailLayoutReader.tsx
124
+ import React3 from "react";
125
+ function getFontFamily(fontFamily) {
126
+ const f = fontFamily != null ? fontFamily : "MODERN_SANS";
127
+ switch (f) {
128
+ case "MODERN_SANS":
129
+ return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
130
+ case "BOOK_SANS":
131
+ return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
132
+ case "ORGANIC_SANS":
133
+ return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
134
+ case "GEOMETRIC_SANS":
135
+ return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
136
+ case "HEAVY_SANS":
137
+ return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
138
+ case "ROUNDED_SANS":
139
+ return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
140
+ case "MODERN_SERIF":
141
+ return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
142
+ case "BOOK_SERIF":
143
+ return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
144
+ case "MONOSPACE":
145
+ return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
146
+ }
147
+ }
148
+ function EmailLayoutReader(props) {
149
+ var _a, _b, _c, _d;
150
+ const childrenIds = (_a = props.childrenIds) != null ? _a : [];
151
+ return /* @__PURE__ */ React3.createElement(
152
+ "div",
153
+ {
154
+ style: {
155
+ backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
156
+ color: (_c = props.textColor) != null ? _c : "#262626",
157
+ fontFamily: getFontFamily(props.fontFamily),
158
+ fontSize: "16px",
159
+ fontWeight: "400",
160
+ letterSpacing: "0.15008px",
161
+ lineHeight: "1.5",
162
+ margin: "0",
163
+ padding: "32px 0",
164
+ minHeight: "100%",
165
+ width: "100%"
166
+ }
167
+ },
168
+ /* @__PURE__ */ React3.createElement(
169
+ "table",
170
+ {
171
+ align: "center",
172
+ width: "100%",
173
+ style: {
174
+ margin: "0 auto",
175
+ maxWidth: "600px",
176
+ backgroundColor: (_d = props.canvasColor) != null ? _d : "#FFFFFF"
177
+ },
178
+ role: "presentation",
179
+ cellSpacing: "0",
180
+ cellPadding: "0",
181
+ border: 0
182
+ },
183
+ /* @__PURE__ */ React3.createElement("tbody", null, /* @__PURE__ */ React3.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React3.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React3.createElement(ReaderBlock, { key: childId, id: childId })))))
184
+ )
185
+ );
186
+ }
187
+
188
+ // src/Reader/core.tsx
189
+ var ReaderContext = createContext({});
190
+ function useReaderDocument() {
191
+ return useContext(ReaderContext);
192
+ }
193
+ var READER_DICTIONARY = buildBlockConfigurationDictionary({
194
+ ColumnsContainer: {
195
+ schema: ColumnsContainerPropsSchema_default,
196
+ Component: ColumnsContainerReader
197
+ },
198
+ Container: {
199
+ schema: ContainerPropsSchema,
200
+ Component: ContainerReader
201
+ },
202
+ EmailLayout: {
203
+ schema: EmailLayoutPropsSchema,
204
+ Component: EmailLayoutReader
205
+ },
206
+ //
207
+ Avatar: {
208
+ schema: AvatarPropsSchema,
209
+ Component: Avatar
210
+ },
211
+ Button: {
212
+ schema: ButtonPropsSchema,
213
+ Component: Button
214
+ },
215
+ Divider: {
216
+ schema: DividerPropsSchema,
217
+ Component: Divider
218
+ },
219
+ Heading: {
220
+ schema: HeadingPropsSchema,
221
+ Component: Heading
222
+ },
223
+ Html: {
224
+ schema: HtmlPropsSchema,
225
+ Component: Html
226
+ },
227
+ Image: {
228
+ schema: ImagePropsSchema,
229
+ Component: Image
230
+ },
231
+ Spacer: {
232
+ schema: SpacerPropsSchema,
233
+ Component: Spacer
234
+ },
235
+ Text: {
236
+ schema: TextPropsSchema,
237
+ Component: Text
238
+ }
239
+ });
240
+ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
241
+ var ReaderDocumentSchema = z4.record(z4.string(), ReaderBlockSchema);
242
+ var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
243
+ function ReaderBlock({ id }) {
244
+ const document = useReaderDocument();
245
+ return /* @__PURE__ */ React4.createElement(BaseReaderBlock, __spreadValues({}, document[id]));
246
+ }
247
+ function Reader({ document, rootBlockId }) {
248
+ return /* @__PURE__ */ React4.createElement(ReaderContext.Provider, { value: document }, /* @__PURE__ */ React4.createElement(ReaderBlock, { id: rootBlockId }));
249
+ }
250
+
251
+ // src/renderers/renderToStaticMarkup.tsx
252
+ function renderToStaticMarkup(document, { rootBlockId }) {
253
+ return "<!DOCTYPE html>" + baseRenderToStaticMarkup(
254
+ /* @__PURE__ */ React5.createElement("html", null, /* @__PURE__ */ React5.createElement("body", null, /* @__PURE__ */ React5.createElement(Reader, { document, rootBlockId })))
255
+ );
256
+ }
257
+ export {
258
+ Reader,
259
+ ReaderBlock,
260
+ ReaderBlockSchema,
261
+ ReaderDocumentSchema,
262
+ renderToStaticMarkup
263
+ };
package/package.json CHANGED
@@ -1,10 +1,17 @@
1
1
  {
2
2
  "name": "@usewaypoint/email-builder",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "React component to render email messages",
5
- "main": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "target": "ES2022",
5
+ "main": "./dist/index.js",
6
+ "module": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "require": "./dist/index.js",
11
+ "import": "./dist/index.mjs",
12
+ "types": "./dist/index.d.ts"
13
+ }
14
+ },
8
15
  "files": [
9
16
  "dist"
10
17
  ],
@@ -15,19 +22,20 @@
15
22
  "license": "MIT",
16
23
  "peerDependencies": {
17
24
  "react": "^16 || ^17 || ^18",
25
+ "react-dom": "^16 || ^17 || ^18",
18
26
  "zod": "^1 || ^2 || ^3"
19
27
  },
20
28
  "dependencies": {
21
- "@usewaypoint/block-avatar": "^0.0.1",
22
- "@usewaypoint/block-button": "^0.0.2",
23
- "@usewaypoint/block-columns-container": "^0.0.2",
24
- "@usewaypoint/block-container": "^0.0.1",
25
- "@usewaypoint/block-divider": "^0.0.3",
26
- "@usewaypoint/block-heading": "^0.0.2",
27
- "@usewaypoint/block-html": "^0.0.2",
28
- "@usewaypoint/block-image": "^0.0.4",
29
- "@usewaypoint/block-spacer": "^0.0.2",
30
- "@usewaypoint/block-text": "^0.0.2",
31
- "@usewaypoint/document-core": "^0.0.4"
29
+ "@usewaypoint/block-avatar": "^0.0.3",
30
+ "@usewaypoint/block-button": "^0.0.3",
31
+ "@usewaypoint/block-columns-container": "^0.0.3",
32
+ "@usewaypoint/block-container": "^0.0.2",
33
+ "@usewaypoint/block-divider": "^0.0.4",
34
+ "@usewaypoint/block-heading": "^0.0.3",
35
+ "@usewaypoint/block-html": "^0.0.3",
36
+ "@usewaypoint/block-image": "^0.0.5",
37
+ "@usewaypoint/block-spacer": "^0.0.3",
38
+ "@usewaypoint/block-text": "^0.0.3",
39
+ "@usewaypoint/document-core": "^0.0.6"
32
40
  }
33
41
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../src/Reader/core.tsx"],"names":[],"mappings":"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"}