Creating @usewaypoint/email-builder

.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

packages/email-builder/.npmignore

@@ -0,0 +1,9 @@
+.editorconfig
+.envrc
+.eslintignore
+.eslintrc.json
+.prettierrc
+jest.config.ts
+src
+tests
+tsconfig.json

packages/email-builder/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2024 Carlos Rodriguez-Rosario
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/email-builder/README.md

@@ -0,0 +1 @@
+# usewaypoint/email-builder

packages/email-builder/package.json

@@ -0,0 +1,33 @@
+{
+ "name": "@usewaypoint/email-builder",
+ "version": "0.0.2",
+ "description": "React component to render email messages",
+ "main": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "target": "ES2022",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "build": "npx tsc"
+ },
+ "author": "carlos@usewaypoint.com",
+ "license": "MIT",
+ "peerDependencies": {
+ "react": "^16 || ^17 || ^18",
+ "zod": "^1 || ^2 || ^3"
+ },
+ "dependencies": {
+ "@usewaypoint/block-avatar": "^0.0.1",
+ "@usewaypoint/block-button": "^0.0.2",
+ "@usewaypoint/block-columns-container": "^0.0.2",
+ "@usewaypoint/block-container": "^0.0.1",
+ "@usewaypoint/block-divider": "^0.0.3",
+ "@usewaypoint/block-heading": "^0.0.2",
+ "@usewaypoint/block-html": "^0.0.2",
+ "@usewaypoint/block-image": "^0.0.4",
+ "@usewaypoint/block-spacer": "^0.0.2",
+ "@usewaypoint/block-text": "^0.0.2",
+ "@usewaypoint/document-core": "^0.0.4"
+ }
+}

packages/email-builder/src/Reader/core.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext } from 'react';
+import { z } from 'zod';
+
+import { Avatar, AvatarPropsSchema } from '@usewaypoint/block-avatar';
+import { Button, ButtonPropsSchema } from '@usewaypoint/block-button';
+import { Divider, DividerPropsSchema } from '@usewaypoint/block-divider';
+import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading';
+import { Html, HtmlPropsSchema } from '@usewaypoint/block-html';
+import { Image, ImagePropsSchema } from '@usewaypoint/block-image';
+import { Spacer, SpacerPropsSchema } from '@usewaypoint/block-spacer';
+import { Text, TextPropsSchema } from '@usewaypoint/block-text';
+import {
+ buildBlockComponent,
+ buildBlockConfigurationDictionary,
+ buildBlockConfigurationSchema,
+} from '@usewaypoint/document-core';
+
+import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
+import ColumnsContainerReader from '../blocks/ColumnsContainer/ColumnsContainerReader';
+import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
+import ContainerReader from '../blocks/Container/ContainerReader';
+import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
+import EmailLayoutReader from '../blocks/EmailLayout/EmailLayoutReader';
+
+const ReaderContext = createContext<TReaderDocument>({});
+
+function useReaderDocument() {
+ return useContext(ReaderContext);
+}
+
+const READER_DICTIONARY = buildBlockConfigurationDictionary({
+ ColumnsContainer: {
+ schema: ColumnsContainerPropsSchema,
+ Component: ColumnsContainerReader,
+ },
+ Container: {
+ schema: ContainerPropsSchema,
+ Component: ContainerReader,
+ },
+ EmailLayout: {
+ schema: EmailLayoutPropsSchema,
+ Component: EmailLayoutReader,
+ },
+ //
+ Avatar: {
+ schema: AvatarPropsSchema,
+ Component: Avatar,
+ },
+ Button: {
+ schema: ButtonPropsSchema,
+ Component: Button,
+ },
+ Divider: {
+ schema: DividerPropsSchema,
+ Component: Divider,
+ },
+ Heading: {
+ schema: HeadingPropsSchema,
+ Component: Heading,
+ },
+ Html: {
+ schema: HtmlPropsSchema,
+ Component: Html,
+ },
+ Image: {
+ schema: ImagePropsSchema,
+ Component: Image,
+ },
+ Spacer: {
+ schema: SpacerPropsSchema,
+ Component: Spacer,
+ },
+ Text: {
+ schema: TextPropsSchema,
+ Component: Text,
+ },
+});
+
+const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
+export const ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);
+
+const BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
+
+export type TReaderBlockProps = { id: string };
+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;
+};
+export default function Reader({ document, rootBlockId }: TReaderProps) {
+ return (
+ <ReaderContext.Provider value={document}>
+ <ReaderBlock id={rootBlockId} />
+ </ReaderContext.Provider>
+ );
+}

packages/email-builder/src/blocks/ColumnsContainer/ColumnsContainerPropsSchema.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { ColumnsContainerPropsSchema as BaseColumnsContainerPropsSchema } from '@usewaypoint/block-columns-container';
+
+const BasePropsShape = BaseColumnsContainerPropsSchema.shape.props.unwrap().unwrap().shape;
+
+const ColumnsContainerPropsSchema = z.object({
+ style: BaseColumnsContainerPropsSchema.shape.style,
+ props: z
+ .object({
+ ...BasePropsShape,
+ columns: z.tuple([
+ z.object({ childrenIds: z.array(z.string()) }),
+ z.object({ childrenIds: z.array(z.string()) }),
+ z.object({ childrenIds: z.array(z.string()) }),
+ ]),
+ })
+ .optional()
+ .nullable(),
+});
+
+export default ColumnsContainerPropsSchema;
+export type ColumnsContainerProps = z.infer<typeof ColumnsContainerPropsSchema>;

packages/email-builder/src/blocks/ColumnsContainer/ColumnsContainerReader.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { ColumnsContainer as BaseColumnsContainer } from '@usewaypoint/block-columns-container';
+
+import { ReaderBlock } from '../../Reader/core';
+
+import { ColumnsContainerProps } from './ColumnsContainerPropsSchema';
+
+export default function ColumnsContainerReader({ style, props }: ColumnsContainerProps) {
+ const { columns, ...restProps } = props ?? {};
+ let cols = undefined;
+ if (columns) {
+ cols = columns.map((col) => col.childrenIds.map((childId) => <ReaderBlock key={childId} id={childId} />));
+ }
+
+ return <BaseColumnsContainer props={restProps} columns={cols} style={style} />;
+}