Adding block html and updating divider/heading (#25)

* Updating @usewaypoint/block-divider
* Updating @usewaypoint/block-heading
* Adding @usewaypoint/block-html

packages/block-divider/.npmignore

@@ -5,5 +5,4 @@
 .prettierrc
 jest.config.ts
 src
-tests
 tsconfig.json

packages/block-divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-divider",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "@usewaypoint/document compatible Divider component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/block-divider/tests/Divider.spec.tsx → packages/block-divider/src/index.spec.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 
 import { render } from '@testing-library/react';
 
-import { Divider } from '../src';
+import { Divider } from '.';
 
 describe('Divider', () => {
   it('renders with default values', () => {
-    expect(render(<Divider style={{}} props={{}} />).asFragment()).toMatchSnapshot();
+    expect(render(<Divider />).asFragment()).toMatchSnapshot();
   });
 
   it('renders with props', () => {

packages/block-divider/src/index.tsx

@@ -1,42 +1,56 @@
 import React, { CSSProperties } from 'react';
 import { z } from 'zod';
 
-function zColor() {
-  return z.string().regex(/^#[0-9a-fA-F]{6}$/);
-}
+const COLOR_SCHEMA = z
+  .string()
+  .regex(/^#[0-9a-fA-F]{6}$/)
+  .nullable()
+  .optional();
+
+const PADDING_SCHEMA = z
+  .object({
+    top: z.number(),
+    bottom: z.number(),
+    right: z.number(),
+    left: z.number(),
+  })
+  .optional()
+  .nullable();
+
+const getPadding = (padding: z.infer<typeof PADDING_SCHEMA>) =>
+  padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : undefined;
 
 export const DividerPropsSchema = z.object({
   style: z
     .object({
-      backgroundColor: zColor().optional().nullable(),
-      padding: z
-        .object({
-          top: z.number(),
-          bottom: z.number(),
-          right: z.number(),
-          left: z.number(),
-        })
-        .optional()
-        .nullable(),
+      backgroundColor: COLOR_SCHEMA,
+      padding: PADDING_SCHEMA,
     })
-    .optional(),
+    .optional()
+    .nullable(),
   props: z
     .object({
-      lineColor: zColor().optional().nullable(),
+      lineColor: COLOR_SCHEMA,
       lineHeight: z.number().optional().nullable(),
     })
-    .optional(),
+    .optional()
+    .nullable(),
 });
 
 export type DividerProps = z.infer<typeof DividerPropsSchema>;
 
+export const DividerPropsDefaults = {
+  lineHeight: 1,
+  lineColor: '#333333',
+};
+
 export function Divider({ style, props }: DividerProps) {
   const st: CSSProperties = {
-    padding: getPadding(style),
+    padding: getPadding(style?.padding),
     backgroundColor: style?.backgroundColor ?? undefined,
   };
-  const borderTopWidth = props?.lineHeight ?? 1;
-  const borderTopColor = props?.lineColor ?? '#333333';
+  const borderTopWidth = props?.lineHeight ?? DividerPropsDefaults.lineHeight;
+  const borderTopColor = props?.lineColor ?? DividerPropsDefaults.lineColor;
   return (
     <div style={st}>
       <hr
@@ -50,11 +64,3 @@ export function Divider({ style, props }: DividerProps) {
     </div>
   );
 }
-
-function getPadding(style: DividerProps['style']) {
-  const value = style?.padding;
-  if (!value) {
-    return undefined;
-  }
-  return `${value.top}px ${value.right}px ${value.bottom}px ${value.left}px`;
-}

packages/block-divider/tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["tests/**/*.spec.ts", "tests/**/*.spec.tsx", "jest.config.ts"]
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx", "jest.config.ts"]
 }

packages/block-heading/.npmignore

@@ -5,5 +5,4 @@
 .prettierrc
 jest.config.ts
 src
-tests
 tsconfig.json

packages/block-heading/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usewaypoint/block-heading",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "@usewaypoint/document compatible Heading component",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/block-heading/tests/__snapshots__/Heading.spec.tsx.snap → packages/block-heading/src/__snapshots__/index.spec.tsx.snap

@@ -4,9 +4,7 @@ exports[`Heading renders with default values 1`] = `
 <DocumentFragment>
   <h2
     style="font-weight: bold; margin: 0px; font-size: 24px;"
-  >
-    Hello!
-  </h2>
+  />
 </DocumentFragment>
 `;
 

packages/block-heading/tests/Heading.spec.tsx → packages/block-heading/src/index.spec.tsx

@@ -2,23 +2,11 @@ import React from 'react';
 
 import { render } from '@testing-library/react';
 
-import { Heading } from '../src';
+import { Heading } from '.';
 
 describe('Heading', () => {
   it('renders with default values', () => {
-    const style = {
-      backgroundColor: null,
-      color: null,
-      fontFamily: null,
-      fontWeight: 'bold' as const,
-      padding: null,
-      textAlign: null,
-    };
-    const props = {
-      text: 'Hello!',
-      level: 'h2' as const,
-    };
-    expect(render(<Heading style={style} props={props} />).asFragment()).toMatchSnapshot();
+    expect(render(<Heading />).asFragment()).toMatchSnapshot();
   });
 
   it('renders with style', () => {