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>;