Document Model Library Creation Guide

This guide will walk you through the process of creating your own document model library using the Document Model Editor in the Connect app.

Step 1: Create a Document Model

1. Access the Document Model Editor in the Connect app using one of the following methods:

   • Visit the web deployment at https://document-model-electron.vercel.app/.
   • Clone the repository from GitHub and run it locally: https://github.com/powerhouse-inc/document-model-electron.

2. In the Document Model Editor, create a new document model by defining its properties, state schema, initial state, and operations schema.

3. Once you have configured your document model, press the Save button in the Sidebar.

4. The document model will be exported as a ZIP file with the extension ".phdm.zip."

Step 2: Create or Clone a Document Model Library Project

Option 1: Create a New Document Model Library Project

Use Yarn to create a new document model library project. Replace "PROJECT_NAME" with your desired project name:

yarn create document-model-lib "PROJECT_NAME"
cd "PROJECT_NAME"

After running the command, you'll have a new project directory created.

Option 2: Clone an existing Document Model Library Project

git clone https://github.com/powerhouse-inc/document-model-libs.git
cd document-model-libs
yarn install

Step 3: Generate the Document Model

Generate the document model using the following command, replacing "DOCUMENT_MODEL" with the the path to the ZIP file saved previously:

yarn generate ./"DOCUMENT_MODEL".phdm.zip

This command will create a directory for the under the /document-models directory within your project which contains:

• JSON file with the document model specification.
• GraphQL file with the state and operation schemas.
• gen folder with autogenerated code.
• src folder with custom code to be completed.

Step 4: Implement the Reducers

Inside the directory document-models/"DOCUMENT_MODEL"/src/reducers there will be a file for each module of the document model with the reducer functions to be implemented for each operation.

Write your custom reducer logic to handle the document model operations and state changes as needed for your application.

You can also export custom utility functions on the document-models/"DOCUMENT_MODEL"/src/utils.ts file.

Step 5: Build and publish the library

yarn build
yarn publish

If the Connect App is set up to bundle this library then the newly created document model will be accessible in the UI.

Available NPM commands

• generate: Updates the generated code according to the JSON spec and GraphQL schema.
• lint: Checks for errors with ESLint and TypeScript checking.
• format: Formats the code using Prettier.
• build: Builds the library project using Vite.
• storybook: Starts Storybook in development mode.
• build-storybook: Builds Storybook.
• test: Runs Jest for testing.