This repository contains the React components that implement the UI to edit a Document Model. These components are to be used inside a container app in a desktop or web environment.
Documention for the Document Model is available at: https://acaldas.github.io/document-model-libs/
Install the library:
yarn add document-model-editors
A Document Model Editor is a React controlled component that allows an user to edit a Document Model instance, respecting the predefined business logic.
Each Editor has a self contained story to ease development and testing. To use the storybook run
yarn storybook
The stories have a Operations addon that will list all the operations performed on the document model instance.
The controls also allow changing the document directly and the edictor theme from light to dark.
A dummy implementation of a Budget Statement UI can be found at src/budget-statement/editor.tsx. It makes use of the hook useBudgetStatementReducer to dispatch actions and apply changes to the budget statement.
The available actions can be seen at https://acaldas.github.io/document-model-libs/modules/BudgetStatement.actions.html.
It has the following props:
initialBudget- The BudgetStatement instance to apply the changes to. The component should reset its state whenever this prop changes.onChange- A callback function to call with a new version of the budget statement.editorContext- The context from the container app.{ theme: "light" | "dark" }