Creating @usewaypoint/email-builder (#58)

* Creating @usewaypoint/email-builder * Consuming @usewaypoint/email-builder
usewaypoint · Mar 4, 2024 · ab29e5e · ab29e5e
1 parent 0a743f9
commit ab29e5e
Show file tree

Hide file tree

Showing 34 changed files with 788 additions and 379 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -31,6 +31,7 @@ jobs:
           (cd ./packages/block-text;pwd;npm ci)
           (cd ./packages/document-core;pwd;npm ci)
           (cd ./packages/editor-sample;pwd;npm ci)
+          (cd ./packages/email-builder;pwd;npm ci)
       - run: npx eslint .
       - run: npx prettier . --check
       - run: npm test

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,6 +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",
     "codemirror": "^6.0.1",
     "highlight.js": "^11.9.0",
     "js-beautify": "^1.15.1",

diff --git a/...-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx b/...-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ContainerSidebarPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { ContainerProps, ContainerPropsSchema } from '../../../../documents/blocks/Container/ContainerPropsSchema';
+import ContainerPropsSchema, { ContainerProps } from '../../../../documents/blocks/Container/ContainerPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';

diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -1,18 +1,17 @@
 import React, { useState } from 'react';
-import { z } from 'zod';
 
 import { Divider } from '@mui/material';
 
-import { EmailLayoutPropsSchema } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
+import EmailLayoutPropsSchema, {
+  EmailLayoutProps,
+} from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import ColorInput from './helpers/inputs/ColorInput';
 
-type EmailLayoutSidebarPanelProps = z.infer<typeof EmailLayoutPropsSchema>;
-
 type EmailLayoutSidebarFieldsProps = {
-  data: EmailLayoutSidebarPanelProps;
-  setData: (v: EmailLayoutSidebarPanelProps) => void;
+  data: EmailLayoutProps;
+  setData: (v: EmailLayoutProps) => void;
 };
 export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutSidebarFieldsProps) {
   const [, setErrors] = useState<Zod.ZodError | null>(null);
@@ -31,18 +30,18 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
     <BaseSidebarPanel title="Layout">
       <ColorInput
         label="Backdrop color"
-        defaultValue={data.backdropColor}
+        defaultValue={data.backdropColor ?? '#EEEEEE'}
         onChange={(backdropColor) => updateData({ ...data, backdropColor })}
       />
       <ColorInput
         label="Canvas color"
-        defaultValue={data.canvasColor}
+        defaultValue={data.canvasColor ?? '#FFFFFF'}
         onChange={(canvasColor) => updateData({ ...data, canvasColor })}
       />
       <Divider />
       <ColorInput
         label="Text color"
-        defaultValue={data.textColor}
+        defaultValue={data.textColor ?? '#242424'}
         onChange={(textColor) => updateData({ ...data, textColor })}
       />
     </BaseSidebarPanel>

diff --git a/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx b/packages/editor-sample/src/App/TemplatePanel/HtmlPanel.tsx
@@ -1,25 +1,26 @@
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 
+import Reader from '@usewaypoint/email-builder/dist/Reader/core';
+
 import { useDocument } from '../../documents/editor/EditorContext';
-import ReaderBlock from '../../documents/reader/ReaderBlock';
-import { ReaderProvider } from '../../documents/reader/ReaderContext';
 
 import TextEditorPanel from './helper/TextEditorPanel';
 
 export default function HtmlPanel() {
   const document = useDocument();
 
-  const string = React.useMemo(() => {
-    return renderToStaticMarkup(
-      <html>
-        <head></head>
-        <body>
-          <ReaderProvider value={document}>
-            <ReaderBlock id="root" />
-          </ReaderProvider>
-        </body>
-      </html>
+  const string = useMemo(() => {
+    return (
+      '<!DOCTYPE html>' +
+      renderToStaticMarkup(
+        <html>
+          <head></head>
+          <body>
+            <Reader document={document} rootBlockId="root" />
+          </body>
+        </html>
+      )
     );
   }, [document]);
 

diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -2,6 +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 EditorBlock from '../../documents/editor/EditorBlock';
 import {
@@ -10,8 +11,6 @@ import {
   useSelectedMainTab,
   useSelectedScreenSize,
 } from '../../documents/editor/EditorContext';
-import ReaderBlock from '../../documents/reader/ReaderBlock';
-import { ReaderProvider } from '../../documents/reader/ReaderContext';
 import ToggleInspectorPanelButton from '../InspectorDrawer/ToggleInspectorPanelButton';
 import ToggleSamplesPanelButton from '../SamplesDrawer/ToggleSamplesPanelButton';
 
@@ -61,9 +60,7 @@ export default function TemplatePanel() {
       case 'preview':
         return (
           <Box sx={mainBoxSx}>
-            <ReaderProvider value={document}>
-              <ReaderBlock id="root" />
-            </ReaderProvider>
+            <Reader document={document} rootBlockId="root" />
           </Box>
         );
       case 'html':

diff --git a/packages/editor-sample/src/documents/blocks/ColumnsContainer/ColumnsContainerEditor.tsx b/packages/editor-sample/src/documents/blocks/ColumnsContainer/ColumnsContainerEditor.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { ColumnsContainer as BaseColumnsContainer } from '@usewaypoint/block-columns-container';
+
+import { useCurrentBlockId } from '../../editor/EditorBlock';
+import { setDocument, setSelectedBlockId } from '../../editor/EditorContext';
+import EditorChildrenIds, { EditorChildrenChange } from '../helpers/EditorChildrenIds';
+
+import ColumnsContainerPropsSchema, { ColumnsContainerProps } from './ColumnsContainerPropsSchema';
+
+const EMPTY_COLUMNS = [{ childrenIds: [] }, { childrenIds: [] }, { childrenIds: [] }];
+
+export default function ColumnsContainerEditor({ style, props }: ColumnsContainerProps) {
+  const currentBlockId = useCurrentBlockId();
+
+  const { columns, ...restProps } = props ?? {};
+  const columnsValue = columns ?? EMPTY_COLUMNS;
+
+  const updateColumn = (columnIndex: 0 | 1 | 2, { block, blockId, childrenIds }: EditorChildrenChange) => {
+    const nColumns = [...columnsValue];
+    nColumns[columnIndex] = { childrenIds };
+    setDocument({
+      [blockId]: block,
+      [currentBlockId]: {
+        type: 'ColumnsContainer',
+        data: ColumnsContainerPropsSchema.parse({
+          style,
+          props: {
+            ...restProps,
+            columns: nColumns,
+          },
+        }),
+      },
+    });
+    setSelectedBlockId(blockId);
+  };
+
+  return (
+    <BaseColumnsContainer
+      props={restProps}
+      style={style}
+      columns={[
+        <EditorChildrenIds childrenIds={columns?.[0]?.childrenIds} onChange={(change) => updateColumn(0, change)} />,
+        <EditorChildrenIds childrenIds={columns?.[1]?.childrenIds} onChange={(change) => updateColumn(1, change)} />,
+        <EditorChildrenIds childrenIds={columns?.[2]?.childrenIds} onChange={(change) => updateColumn(2, change)} />,
+      ]}
+    />
+  );
+}
diff --git a/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx b/packages/editor-sample/src/documents/blocks/ColumnsContainer/index.tsx
diff --git a/packages/editor-sample/src/documents/blocks/Container/ContainerEditor.tsx b/packages/editor-sample/src/documents/blocks/Container/ContainerEditor.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Container as BaseContainer } from '@usewaypoint/block-container';
+
+import { useCurrentBlockId } from '../../editor/EditorBlock';
+import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
+import EditorChildrenIds from '../helpers/EditorChildrenIds';
+
+import { ContainerProps } from './ContainerPropsSchema';
+
+export default function ContainerEditor({ style, props }: ContainerProps) {
+  const childrenIds = props?.childrenIds ?? [];
+
+  const document = useDocument();
+  const currentBlockId = useCurrentBlockId();
+
+  return (
+    <BaseContainer style={style}>
+      <EditorChildrenIds
+        childrenIds={childrenIds}
+        onChange={({ block, blockId, childrenIds }) => {
+          setDocument({
+            [blockId]: block,
+            [currentBlockId]: {
+              type: 'Container',
+              data: {
+                ...document[currentBlockId].data,
+                props: { childrenIds: childrenIds },
+              },
+            },
+          });
+          setSelectedBlockId(blockId);
+        }}
+      />
+    </BaseContainer>
+  );
+}
diff --git a/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/Container/ContainerPropsSchema.tsx
@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 import { ContainerPropsSchema as BaseContainerPropsSchema } from '@usewaypoint/block-container';
 
-export const ContainerPropsSchema = z.object({
+const ContainerPropsSchema = z.object({
   style: BaseContainerPropsSchema.shape.style,
   props: z
     .object({
@@ -12,4 +12,6 @@ export const ContainerPropsSchema = z.object({
     .nullable(),
 });
 
+export default ContainerPropsSchema;
+
 export type ContainerProps = z.infer<typeof ContainerPropsSchema>;