From 445e273e840930cc826f44d39ad319e281ac9d3f Mon Sep 17 00:00:00 2001 From: cohitre Date: Mon, 4 Mar 2024 11:20:05 -0800 Subject: [PATCH] Setting up reader exports (#65) --- README.md | 32 +++++++++++++++++-- packages/editor-sample/package-lock.json | 8 ++--- packages/editor-sample/package.json | 2 +- .../src/App/TemplatePanel/HtmlPanel.tsx | 17 ++-------- .../src/App/TemplatePanel/index.tsx | 2 +- packages/email-builder/package-lock.json | 4 +-- packages/email-builder/package.json | 2 +- packages/email-builder/src/Reader/core.tsx | 7 ++-- packages/email-builder/src/index.ts | 15 +++++++++ .../src/renderers/renderToStaticMarkup.tsx | 20 ++++++++++++ 10 files changed, 81 insertions(+), 28 deletions(-) create mode 100644 packages/email-builder/src/index.ts create mode 100644 packages/email-builder/src/renderers/renderToStaticMarkup.tsx diff --git a/README.md b/README.md index 8ef4912..aa8ba90 100644 --- a/README.md +++ b/README.md @@ -87,8 +87,36 @@ npm install --save @usewaypoint/email-builder Given an EmailBuilder configuration ```javascript -const CONFIGURATION = { - // ... +import { TReaderDocument } from '@usewaypoint/email-builder'; + +const CONFIGURATION: TReaderDocument = { + root: { + type: 'EmailLayout', + data: { + backdropColor: '#F8F8F8', + canvasColor: '#FFFFFF', + textColor: '#242424', + fontFamily: 'MODERN_SANS', + childrenIds: ['block-1709578146127'], + }, + }, + 'block-1709578146127': { + type: 'Text', + data: { + style: { + fontWeight: 'normal', + padding: { + top: 16, + bottom: 16, + right: 24, + left: 24, + }, + }, + props: { + text: 'Hello world', + }, + }, + }, }; ``` diff --git a/packages/editor-sample/package-lock.json b/packages/editor-sample/package-lock.json index f712c17..6faac1e 100644 --- a/packages/editor-sample/package-lock.json +++ b/packages/editor-sample/package-lock.json @@ -23,7 +23,7 @@ "@usewaypoint/block-spacer": "^0.0.2", "@usewaypoint/block-text": "^0.0.2", "@usewaypoint/document-core": "^0.0.4", - "@usewaypoint/email-builder": "^0.0.2", + "@usewaypoint/email-builder": "^0.0.3", "highlight.js": "^11.9.0", "prettier": "^3.2.5", "react": "^18.2.0", @@ -1951,9 +1951,9 @@ } }, "node_modules/@usewaypoint/email-builder": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/email-builder/-/email-builder-0.0.2.tgz", - "integrity": "sha512-d15dlfVsGzyNTuaqp72NYWjHTVRmlwqiDm9TnxeryBTbSptED1Pf+kLGKDepFR/cK7qTZREvF0m6f3RxhdD0AA==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/email-builder/-/email-builder-0.0.3.tgz", + "integrity": "sha512-WqUzWOcR9DTuEOFupjEzbgx2exxC0rZibf/9oJgPTYE7IPm3hEkTBQql6ttwzPjb3gwxP6nCUIGKF3ltMcQwuA==", "dependencies": { "@usewaypoint/block-avatar": "^0.0.1", "@usewaypoint/block-button": "^0.0.2", diff --git a/packages/editor-sample/package.json b/packages/editor-sample/package.json index 49e7ee3..9440e73 100644 --- a/packages/editor-sample/package.json +++ b/packages/editor-sample/package.json @@ -23,7 +23,7 @@ "@usewaypoint/block-spacer": "^0.0.2", "@usewaypoint/block-text": "^0.0.2", "@usewaypoint/document-core": "^0.0.4", - "@usewaypoint/email-builder": "^0.0.2", + "@usewaypoint/email-builder": "^0.0.3", "highlight.js": "^11.9.0", "prettier": "^3.2.5", "react": "^18.2.0", diff --git a/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx index 431d6e4..a0ab352 100644 --- a/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx +++ b/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx @@ -1,7 +1,6 @@ import React, { useMemo } from 'react'; -import { renderToStaticMarkup } from 'react-dom/server'; -import Reader from '@usewaypoint/email-builder/dist/Reader/core'; +import { renderToStaticMarkup } from '@usewaypoint/email-builder'; import { useDocument } from '../../documents/editor/EditorContext'; @@ -9,18 +8,6 @@ import HighlightedCodePanel from './helper/HighlightedCodePanel'; export default function HtmlPanel() { const document = useDocument(); - const code = useMemo(() => { - return ( - '' + - renderToStaticMarkup( - - - - - - ) - ); - }, [document]); - + const code = useMemo(() => renderToStaticMarkup(document, { rootBlockId: 'root' }), [document]); return ; } diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx index 66c8129..ad6713c 100644 --- a/packages/editor-sample/src/App/TemplatePanel/index.tsx +++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material'; import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material'; -import Reader from '@usewaypoint/email-builder/dist/Reader/core'; +import { Reader } from '@usewaypoint/email-builder'; import EditorBlock from '../../documents/editor/EditorBlock'; import { diff --git a/packages/email-builder/package-lock.json b/packages/email-builder/package-lock.json index 1fefc1a..3509681 100644 --- a/packages/email-builder/package-lock.json +++ b/packages/email-builder/package-lock.json @@ -1,12 +1,12 @@ { "name": "@usewaypoint/email-builder", - "version": "0.0.2", + "version": "0.0.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@usewaypoint/email-builder", - "version": "0.0.2", + "version": "0.0.3", "license": "MIT", "dependencies": { "@usewaypoint/block-avatar": "^0.0.1", diff --git a/packages/email-builder/package.json b/packages/email-builder/package.json index cdac964..cfaa2f7 100644 --- a/packages/email-builder/package.json +++ b/packages/email-builder/package.json @@ -1,6 +1,6 @@ { "name": "@usewaypoint/email-builder", - "version": "0.0.2", + "version": "0.0.3", "description": "React component to render email messages", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/email-builder/src/Reader/core.tsx b/packages/email-builder/src/Reader/core.tsx index 7a98b23..a567bb3 100644 --- a/packages/email-builder/src/Reader/core.tsx +++ b/packages/email-builder/src/Reader/core.tsx @@ -76,8 +76,11 @@ const READER_DICTIONARY = buildBlockConfigurationDictionary({ }, }); -const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY); +export const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY); +export type TReaderBlock = z.infer; + export const ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema); +export type TReaderDocument = Record; const BaseReaderBlock = buildBlockComponent(READER_DICTIONARY); @@ -86,7 +89,7 @@ export function ReaderBlock({ id }: TReaderBlockProps) { const document = useReaderDocument(); return ; } -export type TReaderDocument = Record>; + export type TReaderProps = { document: Record>; rootBlockId: string; diff --git a/packages/email-builder/src/index.ts b/packages/email-builder/src/index.ts new file mode 100644 index 0000000..5a69d40 --- /dev/null +++ b/packages/email-builder/src/index.ts @@ -0,0 +1,15 @@ +export { default as renderToStaticMarkup } from './renderers/renderToStaticMarkup'; + +export { + ReaderBlockSchema, + TReaderBlock, + // + ReaderDocumentSchema, + TReaderDocument, + // + ReaderBlock, + TReaderBlockProps, + // + TReaderProps, + default as Reader, +} from './Reader/core'; diff --git a/packages/email-builder/src/renderers/renderToStaticMarkup.tsx b/packages/email-builder/src/renderers/renderToStaticMarkup.tsx new file mode 100644 index 0000000..52f10eb --- /dev/null +++ b/packages/email-builder/src/renderers/renderToStaticMarkup.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { renderToStaticMarkup as baseRenderToStaticMarkup } from 'react-dom/server'; + +import Reader, { TReaderDocument } from '../Reader/core'; + +type TOptions = { + rootBlockId: string; +}; +export default function renderToStaticMarkup(document: TReaderDocument, { rootBlockId }: TOptions) { + return ( + '' + + baseRenderToStaticMarkup( + + + + + + ) + ); +}