Adding basic Block and configuration builders

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.json

@@ -3,7 +3,7 @@
   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "ecmaVersion": 12,
+    "ecmaVersion": 2015,
     "project": "./tsconfig.json",
     "sourceType": "module"
   },

.github/workflows/ci.yaml

@@ -0,0 +1,24 @@
+name: CI - Code styles, unit tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches:
+      - main
+concurrency:
+  group: ${{ github.head_ref }}-codestyles
+  cancel-in-progress: true
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - run: npx eslint .
+      - run: npx prettier . --check
+      - run: npm test

.gitignore

@@ -9,3 +9,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+dist

.npmignore

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

jest.config.ts

@@ -1,8 +1,8 @@
-import type { Config } from "jest";
+import type { Config } from 'jest';
 
 const config: Config = {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
 };
 
 export default config;

package.json

@@ -4,11 +4,13 @@
   "description": "Tools to render waypoint-style documents.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "target": "ES2022",
   "files": [
-    "lib"
+    "dist"
   ],
   "scripts": {
-    "prepublish": "./node_modules/.bin/tsc",
+    "build": "npx tsc",
+    "prepublish": "npx tsc --project tsconfig.build.json",
     "test": "npx jest"
   },
   "author": "carlos@usewaypoint.com",

src/builders/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { z } from 'zod';
+
+export type DocumentBlocksDictionary<T extends { [name: string]: z.AnyZodObject }> = {
+  [K in keyof T]: {
+    schema: T[K];
+    Component: (props: z.infer<T[K]>) => React.ReactNode;
+  };
+};
+
+export function buildBlockConfigurationSchema<T extends { [name: string]: z.AnyZodObject }>(
+  blocks: DocumentBlocksDictionary<T>
+) {
+  type BaseBlockComponentProps<TType extends keyof T> = {
+    id: string;
+    type: TType;
+    data: z.infer<T[TType]>;
+  };
+
+  const blockObjects = Object.keys(blocks).map((type: keyof T) =>
+    z.object({
+      id: z.string(),
+      type: z.literal(type),
+      data: blocks[type].schema,
+    })
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return z.discriminatedUnion('type', blockObjects as any).transform((v) => v as BaseBlockComponentProps<keyof T>);
+}
+
+export function buildBlockComponent<T extends { [name: string]: z.AnyZodObject }>(blocks: DocumentBlocksDictionary<T>) {
+  type BaseBlockComponentProps<TType extends keyof T> = {
+    type: TType;
+    data: z.infer<T[TType]>;
+  };
+
+  return function BlockComponent({ type, data }: BaseBlockComponentProps<keyof T>): React.ReactNode {
+    return React.createElement(blocks[type].Component, data);
+  };
+}

src/index.tsx

@@ -0,0 +1 @@
+export * from './builders';

tests/builder/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`builders buildBlockComponent renders the specified component 1`] = `
+<DocumentFragment>
+  <div>
+    TEST TEXT!
+  </div>
+</DocumentFragment>
+`;

tests/builder/index.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { z } from 'zod';
+
+import { render } from '@testing-library/react';
+
+import { buildBlockComponent, buildBlockConfigurationSchema } from '../../src/builders';
+
+describe('builders', () => {
+  describe('buildBlockComponent', () => {
+    it('renders the specified component', () => {
+      const BlockComponent = buildBlockComponent({
+        SampleBlock: {
+          schema: z.object({ text: z.string() }),
+          Component: ({ text }) => <div>{text.toUpperCase()}</div>,
+        },
+      });
+      expect(
+        render(<BlockComponent type="SampleBlock" data={{ text: 'Test text!' }} />).asFragment()
+      ).toMatchSnapshot();
+    });
+  });
+
+  describe('buildBlockConfigurationSchema', () => {
+    it('adds an id, data, and type to the provided schema', () => {
+      const blockConfigurationSchema = buildBlockConfigurationSchema({
+        SampleBlock: {
+          schema: z.object({ text: z.string() }),
+          Component: ({ text }) => <div>{text.toUpperCase()}</div>,
+        },
+      });
+
+      const sampleValidData = {
+        id: 'my id',
+        type: 'SampleBlock',
+        data: { text: 'Test text!' },
+      };
+      const parsedData = blockConfigurationSchema.safeParse(sampleValidData);
+      expect(parsedData).toEqual({
+        success: true,
+        data: {
+          id: 'my id',
+          type: 'SampleBlock',
+          data: { text: 'Test text!' },
+        },
+      });
+    });
+  });
+});

tsconfig.build.json

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

tsconfig.json

@@ -1,27 +1,20 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "module": "esnext",
     "lib": [],
     "moduleResolution": "node",
     "jsx": "react",
     "outDir": "dist",
     "strict": true,
     "sourceMap": true,
-    "noImplicitAny": true,
-    "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "declarationMap": true,
     "declaration": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
     "noUnusedLocals": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "inlineSources": true,
-    "strictPropertyInitialization": true,
-    "strictNullChecks": true
+    "noFallthroughCasesInSwitch": true
   },
-  "include": ["./jest.config.ts", "src/**/*.ts", "tests/**/*.ts", "src/**/*.tsx", "tests/**/*.tsx"],
+  "include": ["jest.config.ts", "src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],
   "exclude": ["node_modules", "dist"]
 }