Setting up reader exports (#65)

usewaypoint · Mar 4, 2024 · 445e273 · 445e273
1 parent 7024e21
commit 445e273
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 28 deletions.
diff --git 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
diff --git 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
@@ -1,26 +1,13 @@
 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';
 
 import HighlightedCodePanel from './helper/HighlightedCodePanel';
 
 export default function HtmlPanel() {
   const document = useDocument();
-  const code = useMemo(() => {
-    return (
-      '<!DOCTYPE html>' +
-      renderToStaticMarkup(
-        <html>
-          <body>
-            <Reader document={document} rootBlockId="root" />
-          </body>
-        </html>
-      )
-    );
-  }, [document]);
-
+  const code = useMemo(() => renderToStaticMarkup(document, { rootBlockId: 'root' }), [document]);
   return <HighlightedCodePanel type="html" value={code} />;
 }
diff --git 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
diff --git 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
@@ -76,8 +76,11 @@ const READER_DICTIONARY = buildBlockConfigurationDictionary({
   },
 });
 
-const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
+export const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
+export type TReaderBlock = z.infer<typeof ReaderBlockSchema>;
+
 export const ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
+export type TReaderDocument = Record<string, TReaderBlock>;
 
 const BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
 
@@ -86,7 +89,7 @@ export function ReaderBlock({ id }: TReaderBlockProps) {
   const document = useReaderDocument();
   return <BaseReaderBlock {...document[id]} />;
 }
-export type TReaderDocument = Record<string, z.infer<typeof ReaderBlockSchema>>;
+
 export type TReaderProps = {
   document: Record<string, z.infer<typeof ReaderBlockSchema>>;
   rootBlockId: string;

diff --git a/packages/email-builder/src/index.ts 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
@@ -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 (
+    '<!DOCTYPE html>' +
+    baseRenderToStaticMarkup(
+      <html>
+        <body>
+          <Reader document={document} rootBlockId={rootBlockId} />
+        </body>
+      </html>
+    )
+  );
+}