Adding buildBlockConfigurationDictionary to document-core (#54)

packages/document-core/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@usewaypoint/document-core",
- "version": "0.0.2",
+ "version": "0.0.4",
  "description": "Tools to render waypoint-style documents (core package)",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",

packages/document-core/src/builders/buildBlockConfigurationDictionary.ts

@@ -0,0 +1,12 @@
+import { BaseZodDictionary, DocumentBlocksDictionary } from '../utils';
+
+/**
+ * Identity function to type a DocumentBlocksDictionary
+ * @param blocks Main DocumentBlocksDictionary
+ * @returns typed DocumentBlocksDictionary
+ */
+export default function buildBlockConfigurationDictionary<T extends BaseZodDictionary>(
+ blocks: DocumentBlocksDictionary<T>
+) {
+ return blocks;
+}

packages/document-core/src/index.ts

@@ -1,4 +1,5 @@
 export { default as buildBlockComponent } from './builders/buildBlockComponent';
 export { default as buildBlockConfigurationSchema } from './builders/buildBlockConfigurationSchema';
+export { default as buildBlockConfigurationDictionary } from './builders/buildBlockConfigurationDictionary';
 
 export { BlockConfiguration, DocumentBlocksDictionary } from './utils';

packages/editor-sample/package.json

@@ -22,7 +22,7 @@
  "@usewaypoint/block-image": "^0.0.4",
  "@usewaypoint/block-spacer": "^0.0.2",
  "@usewaypoint/block-text": "^0.0.2",
- "@usewaypoint/document-core": "^0.0.1",
+ "@usewaypoint/document-core": "^0.0.4",
  "codemirror": "^6.0.1",
  "highlight.js": "^11.9.0",
  "js-beautify": "^1.15.1",

packages/editor-sample/src/documents/editor/core.tsx

@@ -1,78 +1,80 @@
 import React from 'react';
 import { z } from 'zod';
 
-import { Avatar, AvatarProps, AvatarPropsSchema } from '@usewaypoint/block-avatar';
-import { Button, ButtonProps, ButtonPropsSchema } from '@usewaypoint/block-button';
-import { Divider, DividerProps, DividerPropsSchema } from '@usewaypoint/block-divider';
-import { Heading, HeadingProps, HeadingPropsSchema } from '@usewaypoint/block-heading';
-import { Html, HtmlProps, HtmlPropsSchema } from '@usewaypoint/block-html';
-import { Image, ImageProps, ImagePropsSchema } from '@usewaypoint/block-image';
-import { Spacer, SpacerProps, SpacerPropsSchema } from '@usewaypoint/block-spacer';
-import { Text, TextProps, TextPropsSchema } from '@usewaypoint/block-text';
-import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
+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 { EditorColumnsContainer } from '../blocks/ColumnsContainer';
-import ColumnsContainerPropsSchema, {
- ColumnsContainerProps,
-} from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
+import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
 import { EditorContainer } from '../blocks/Container';
-import { ContainerProps, ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
-import { EditorEmailLayout, EmailLayoutProps } from '../blocks/EmailLayout';
+import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
+import { EditorEmailLayout } from '../blocks/EmailLayout';
 import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper';
 
-const EDITOR_DICTIONARY = {
+const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
  Avatar: {
  schema: AvatarPropsSchema,
- Component: (props: AvatarProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Avatar {...props} />
  </EditorBlockWrapper>
  ),
  },
  Button: {
  schema: ButtonPropsSchema,
- Component: (props: ButtonProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Button {...props} />
  </EditorBlockWrapper>
  ),
  },
  Container: {
  schema: ContainerPropsSchema,
- Component: (props: ContainerProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <EditorContainer {...props} />
  </EditorBlockWrapper>
  ),
  },
  ColumnsContainer: {
  schema: ColumnsContainerPropsSchema,
- Component: (props: ColumnsContainerProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <EditorColumnsContainer {...props} />
  </EditorBlockWrapper>
  ),
  },
  Heading: {
  schema: HeadingPropsSchema,
- Component: (props: HeadingProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Heading {...props} />
  </EditorBlockWrapper>
  ),
  },
  Html: {
  schema: HtmlPropsSchema,
- Component: (props: HtmlProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Html {...props} />
  </EditorBlockWrapper>
  ),
  },
  Image: {
  schema: ImagePropsSchema,
- Component: (data: ImageProps) => {
+ Component: (data) => {
  const props = {
  ...data,
  props: {
@@ -89,37 +91,37 @@ const EDITOR_DICTIONARY = {
  },
  Text: {
  schema: TextPropsSchema,
- Component: (props: TextProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Text {...props} />
  </EditorBlockWrapper>
  ),
  },
  EmailLayout: {
  schema: EmailLayoutPropsSchema,
- Component: (p: EmailLayoutProps) => (
+ Component: (p) => (
  <div style={{ height: '100%' }}>
  <EditorEmailLayout {...p} />
  </div>
  ),
  },
  Spacer: {
  schema: SpacerPropsSchema,
- Component: (props: SpacerProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Spacer {...props} />
  </EditorBlockWrapper>
  ),
  },
  Divider: {
  schema: DividerPropsSchema,
- Component: (props: DividerProps) => (
+ Component: (props) => (
  <EditorBlockWrapper>
  <Divider {...props} />
  </EditorBlockWrapper>
  ),
  },
-};
+});
 
 export const EditorBlock = buildBlockComponent(EDITOR_DICTIONARY);
 export const EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);

packages/editor-sample/src/documents/reader/core.tsx

@@ -8,7 +8,11 @@ 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, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
+import {
+ buildBlockComponent,
+ buildBlockConfigurationDictionary,
+ buildBlockConfigurationSchema,
+} from '@usewaypoint/document-core';
 
 import { ColumnsContainer } from '../blocks/ColumnsContainer';
 import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsContainerPropsSchema';
@@ -17,7 +21,7 @@ import { ContainerPropsSchema } from '../blocks/Container/ContainerPropsSchema';
 import { EmailLayout } from '../blocks/EmailLayout';
 import { EmailLayoutPropsSchema } from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 
-const READER_DICTIONARY = {
+const READER_DICTIONARY = buildBlockConfigurationDictionary({
  Avatar: {
  schema: AvatarPropsSchema,
  Component: Avatar,
@@ -62,7 +66,7 @@ const READER_DICTIONARY = {
  schema: SpacerPropsSchema,
  Component: Spacer,
  },
-};
+});
 
 const ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
 const ReaderDocumentSchema = z.record(z.string(), ReaderBlockSchema);