Fixing CI and some typescript

.github/workflows/ci.yaml

@@ -18,10 +18,20 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
-      - run: npm ci
-      - run: (cd ./packages/document-core;npm ci)
-      - run: (cd ./packages/editor-sample;npm ci)
+          cache-dependency-path: '**/package-lock.json'
+      - run: |
+          npm ci
+          (cd ./packages/block-avatar;pwd;npm ci)
+          (cd ./packages/block-button;pwd;npm ci)
+          (cd ./packages/block-divider;pwd;npm ci)
+          (cd ./packages/block-heading;pwd;npm ci)
+          (cd ./packages/block-html;pwd;npm ci)
+          (cd ./packages/block-image;pwd;npm ci)
+          (cd ./packages/block-spacer;pwd;npm ci)
+          (cd ./packages/block-text;pwd;npm ci)
+          (cd ./packages/document-core;pwd;npm ci)
+          (cd ./packages/editor-sample;pwd;npm ci)
       - run: npx eslint .
       - run: npx prettier . --check
-      - run: npx tsc --noEmit
       - run: npm test
+      - run: ./node_modules/.bin/tsc --noEmit

packages/document-core/package.json

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

packages/document-core/src/builders/buildBlockComponent.ts → packages/document-core/src/builders/buildBlockComponent.tsx

@@ -8,6 +8,7 @@ import { BaseZodDictionary, BlockConfiguration, DocumentBlocksDictionary } from
  */
 export default function buildBlockComponent<T extends BaseZodDictionary>(blocks: DocumentBlocksDictionary<T>) {
   return function BlockComponent({ type, data }: BlockConfiguration<T>) {
-    return React.createElement(blocks[type].Component, data);
+    const Component = blocks[type].Component;
+    return <Component {...data} />;
   };
 }

packages/document-core/src/utils.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 import { z } from 'zod';
 
 export type BaseZodDictionary = { [name: string]: z.AnyZodObject };
 export type DocumentBlocksDictionary<T extends BaseZodDictionary> = {
   [K in keyof T]: {
     schema: T[K];
-    Component: (props: z.infer<T[K]>) => React.ReactNode;
+    Component: (props: z.infer<T[K]>) => JSX.Element;
   };
 };
 

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/SpacerSidebarPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { HeightOutlined } from '@mui/icons-material';
-import { SpacerProps, SpacerPropsSchema } from '@usewaypoint/block-spacer';
+import { SpacerProps, SpacerPropsDefaults, SpacerPropsSchema } from '@usewaypoint/block-spacer';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import SliderInput from './helpers/inputs/SliderInput';
@@ -32,7 +32,7 @@ export default function SpacerSidebarPanel({ data, setData }: SpacerSidebarPanel
         step={4}
         min={4}
         max={128}
-        defaultValue={data.props.height ?? 16}
+        defaultValue={data.props?.height ?? SpacerPropsDefaults.height}
         onChange={(height) => updateData({ ...data, props: { ...data.props, height } })}
       />
     </BaseSidebarPanel>

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/TextSidebarPanel.tsx

@@ -28,7 +28,7 @@ export default function TextSidebarPanel({ data, setData }: TextSidebarPanelProp
       <TextInput
         label="Content"
         rows={5}
-        defaultValue={data.props.text}
+        defaultValue={data.props?.text ?? ''}
         onChange={(text) => updateData({ ...data, props: { ...data.props, text } })}
       />
 

packages/editor-sample/src/documents/blocks/helpers/block-wrappers/index.tsx

@@ -8,7 +8,7 @@ type TCommonProps = {
   style: Record<string, unknown>;
 };
 
-export function addReaderBlockWrapper<TProps extends TCommonProps>(ChildComponent: (props: TProps) => React.ReactNode) {
+export function addReaderBlockWrapper<TProps extends TCommonProps>(ChildComponent: (props: TProps) => JSX.Element) {
   return (props: TProps) => {
     return (
       <ReaderBlockWrapper style={props.style}>
@@ -18,7 +18,7 @@ export function addReaderBlockWrapper<TProps extends TCommonProps>(ChildComponen
   };
 }
 
-export function addEditorBlockWrapper<TProps extends TCommonProps>(ChildComponent: (props: TProps) => React.ReactNode) {
+export function addEditorBlockWrapper<TProps extends TCommonProps>(ChildComponent: (props: TProps) => JSX.Element) {
   return (props: TProps) => {
     return (
       <EditorBlockWrapper>

packages/editor-sample/src/getConfiguration/sample/one-time-passcode.ts

@@ -31,8 +31,6 @@ const ONE_TIME_PASSCODE: TEditorConfiguration = {
         textAlign: 'center',
       },
       props: {
-        height: 24,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_jc7ZfPvdHJ6rtH1W/&.png',
         alt: '',
         linkHref: null,

packages/editor-sample/src/getConfiguration/sample/order-ecommerce.ts

@@ -261,8 +261,6 @@ const ORDER_ECOMMERCE: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: null,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_FBfTeYhbdXtqYpCA/kiran-ck-6rXpQzfCYlw-unsplash.jpg',
         alt: '',
         linkHref: null,
@@ -366,8 +364,6 @@ const ORDER_ECOMMERCE: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: null,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_vjmjV2NrQ52h1iLj/coupon.png',
         alt: '',
         linkHref: null,

packages/editor-sample/src/getConfiguration/sample/post-metrics-report.ts

@@ -36,8 +36,6 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: 16,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_n3eLjsf37dcjFaj5/Narrative.png',
         alt: '',
         linkHref: null,
@@ -80,8 +78,7 @@ const POST_METRICS_REPORT: TEditorConfiguration = {
         size: 32,
         shape: 'circle',
         imageUrl: 'https://ui-avatars.com/api/?name=John+Doe',
-        fallbackText: 'Jordan',
-        fallbackColor: null,
+        alt: 'Jordan',
       },
     },
   },

packages/editor-sample/src/getConfiguration/sample/reservation-reminder.ts

@@ -42,8 +42,6 @@ const RESERVATION_REMINDER: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: 32,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_RAFATLGe3CN1wDsb/birdhouse.png',
         alt: '',
         linkHref: null,
@@ -111,8 +109,7 @@ const RESERVATION_REMINDER: TEditorConfiguration = {
         size: 64,
         shape: 'circle',
         imageUrl: '',
-        fallbackText: 'Elaina',
-        fallbackColor: null,
+        alt: 'Elaina',
       },
     },
   },
@@ -305,8 +302,6 @@ const RESERVATION_REMINDER: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: null,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_QWeWcucRbjPqoewY/L1030293.jpg',
         alt: 'Photo',
         linkHref: 'https://example.usewaypoint.com/listings/r029348209842',

packages/editor-sample/src/getConfiguration/sample/reset-password.ts

@@ -32,8 +32,6 @@ const RESET_PASSWORD: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: 40,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_w9brVHZobEBhsJSK/marketbase.png',
         alt: '',
         linkHref: null,

packages/editor-sample/src/getConfiguration/sample/respond-to-message.ts

@@ -32,8 +32,6 @@ const RESPOND_TO_MESSAGE: TEditorConfiguration = {
         textAlign: null,
       },
       props: {
-        height: 32,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_hW6RusynHUNTKoLm/boop.png',
         alt: '',
         linkHref: null,

packages/editor-sample/src/getConfiguration/sample/subscription-receipt.ts

@@ -31,8 +31,6 @@ const SUBSCRIPTION_RECEIPT: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: 18,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_9TcdHLq5SpEkRADB/REMIX.png',
         alt: 'Remix',
         linkHref: 'https://remix.example.com',
@@ -297,8 +295,6 @@ const SUBSCRIPTION_RECEIPT: TEditorConfiguration = {
         textAlign: 'left',
       },
       props: {
-        height: null,
-        width: null,
         url: 'https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_8yUGBZcXaAtTEofB/invoice-skeleton.png',
         alt: 'Your invoice has been paid.',
         linkHref: 'http://remix.example.com/receipt/1923-2093',