Using block packages in the sample-editor

.github/workflows/ci.yaml

@@ -18,10 +18,19 @@ 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

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/package.json

@@ -12,9 +12,14 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
-    "@usewaypoint/block-divider": "^0.0.1",
-    "@usewaypoint/block-heading": "^0.0.1",
-    "@usewaypoint/block-spacer": "^0.0.1",
+    "@usewaypoint/block-avatar": "^0.0.1",
+    "@usewaypoint/block-button": "^0.0.1",
+    "@usewaypoint/block-divider": "^0.0.3",
+    "@usewaypoint/block-heading": "^0.0.2",
+    "@usewaypoint/block-html": "^0.0.1",
+    "@usewaypoint/block-image": "^0.0.2",
+    "@usewaypoint/block-spacer": "^0.0.2",
+    "@usewaypoint/block-text": "^0.0.1",
     "@usewaypoint/document-core": "^0.0.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",

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

@@ -2,11 +2,9 @@ import React, { useState } from 'react';
 
 import { AspectRatioOutlined } from '@mui/icons-material';
 import { ToggleButton } from '@mui/material';
-
-import { AvatarProps, AvatarPropsSchema } from '../../../../documents/blocks/Avatar';
+import { AvatarProps, AvatarPropsDefaults, AvatarPropsSchema } from '@usewaypoint/block-avatar';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
-import { NullableColorInput } from './helpers/inputs/ColorInput';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
 import SliderInput from './helpers/inputs/SliderInput';
 import TextInput from './helpers/inputs/TextInput';
@@ -28,6 +26,11 @@ export default function AvatarSidebarPanel({ data, setData }: AvatarSidebarPanel
     }
   };
 
+  const size = data.props?.size ?? AvatarPropsDefaults.size;
+  const imageUrl = data.props?.imageUrl ?? AvatarPropsDefaults.imageUrl;
+  const alt = data.props?.alt ?? AvatarPropsDefaults.alt;
+  const shape = data.props?.shape ?? AvatarPropsDefaults.shape;
+
   return (
     <BaseSidebarPanel title="Avatar block">
       <SliderInput
@@ -37,14 +40,14 @@ export default function AvatarSidebarPanel({ data, setData }: AvatarSidebarPanel
         step={3}
         min={32}
         max={256}
-        defaultValue={data.props.size}
+        defaultValue={size}
         onChange={(size) => {
           updateData({ ...data, props: { ...data.props, size } });
         }}
       />
       <RadioGroupInput
         label="Shape"
-        defaultValue={data.props.shape}
+        defaultValue={shape}
         onChange={(shape) => {
           updateData({ ...data, props: { ...data.props, shape } });
         }}
@@ -56,25 +59,17 @@ export default function AvatarSidebarPanel({ data, setData }: AvatarSidebarPanel
       <TextInput
         label="Image URL"
         helperText="Leave blank to use fallback text."
-        defaultValue={data.props.imageUrl}
+        defaultValue={imageUrl}
         onChange={(imageUrl) => {
           updateData({ ...data, props: { ...data.props, imageUrl } });
         }}
       />
       <TextInput
         label="Fallback text"
         helperText="Automatically truncates to 2 characters max."
-        defaultValue={data.props.fallbackText}
-        onChange={(fallbackText) => {
-          updateData({ ...data, props: { ...data.props, fallbackText } });
-        }}
-      />
-      <NullableColorInput
-        label="Fallback text background color"
-        secondarySwatch={[]}
-        defaultValue={data.props.fallbackColor}
-        onChange={(fallbackColor) => {
-          updateData({ ...data, props: { ...data.props, fallbackColor } });
+        defaultValue={alt}
+        onChange={(alt) => {
+          updateData({ ...data, props: { ...data.props, alt } });
         }}
       />