npm package: @optimajet/workflow-forms-viewer
Description: A lightweight React component for rendering and executing forms created with Workflow Engine. This library provides a complete solution for displaying forms, handling user input, validation, and form submission.
Author: Optimajet
Latest version: 20.0.8

# @optimajet/workflow-forms-viewer

A lightweight React component for rendering and executing forms created with Workflow Engine. This library provides a complete solution for displaying forms, handling user input, validation, and form submission.

## Features

- **JSON-First Rendering** — Render forms from JSON definitions
- **Multi-Form Support** — Display multiple forms with tabbed navigation
- **Custom Tabs** — Provide your own tab renderer for custom UI
- **Form Execution** — Built-in form submission and execution handling
- **Save Draft** — Support for saving form data as drafts
- **Validation** — Built-in form validation with Zod
- **RSuite Integration** — Pre-styled components based on RSuite
- **Flexible Architecture** — Customizable form viewer properties
- **Error Handling** — Comprehensive error handling and reporting

## Installation

```bash
npm install @optimajet/workflow-forms-viewer
```

## Dependencies

This package requires the following peer dependencies:

```bash
npm install react
```

## Quick Start

```jsx
import React from 'react'
import {Form, FormKey, FormsViewer} from '@optimajet/workflow-forms-viewer'

export function UserForm({apiUrl}: AppProps) {

  const {id} = useParams()
  const {selectedUser} = useAppState()
  const showError = useShowError()

  const getForm = useCallback(async (formKey: FormKey) => {
  ...
  }, [apiUrl])

  const getForms = useCallback(async () => {
  ...
  }, [apiUrl, id, selectedUser])

  const saveForm = useCallback(async (processId: string, formKey: FormKey, data: Record<string, unknown>) => {
  ...
  }, [apiUrl, selectedUser])

  const executeForm = useCallback(async (processId: string, formKey: FormKey, commandName: string, data: Record<string, unknown>) => {
  ...
  }, [apiUrl, selectedUser])

  return <FormsViewer getForm={getForm} getForms={getForms} onError={showError} onSuccess={showSuccess} saveForm={saveForm}
                      executeForm={executeForm}
  />

}
```

## API Reference

### FormsViewerProps

| Property | Type                                                                                                                                            | Required | Description |
|----------|-------------------------------------------------------------------------------------------------------------------------------------------------|----------|-------------|
| `getForms` | `() => Form[] \| Promise<Form[]>`                                                                                                               | Yes | Handler to retrieve list of available forms |
| `getForm` | `(formKey: FormKey) => string \| Promise<string>`                                                                                               | Yes | Handler to retrieve form definition by key |
| `saveForm` | `(processId: string, formKey: FormKey, data: Record<string, unknown>) => SaveFormResponse \| Promise<SaveFormResponse>`                         | Yes | Handler to save form data (draft) |
| `executeForm` | `(processId: string, form: FormKey, commandName: string, data: Record<string, unknown>) => ExecuteFormResponse \| Promise<ExecuteFormResponse>` | Yes | Handler to execute/submit form |
| `onError` | `(error: string \| Error) => void`                                                                                                              | Yes | Error handler callback |
| `onSuccess` | `(message: string) => void`                                                                                                                     | Yes | Success handler callback |
| `tabsRenderer` | `(props: TabsRendererProps) => React.ReactElement`                                                                                              | No | Custom tabs renderer component |
| `formViewerProps` | `OmittedFormViewerProps`                                                                                                                        | No | Additional props for FormViewer component |


## Built With

- [@react-form-builder/core](https://www.npmjs.com/package/@react-form-builder/core) — Core form engine
- [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite) — RSuite components
- [RSuite](https://rsuitejs.com/) — UI component library

## Documentation

- [Workflow Engine Documentation](https://workflowengine.io/documentation/forms)
- [Forms Sample](https://workflowengine.io/documentation/forms-sample)
- [FormEngine Core Documentation](https://formengine.io/documentation/)

## Support

For issues and questions:

- **Email:** support@optimajet.com
- **Website:** https://workflowengine.io/

## License

MIT

## Author

**Optimajet**

- Website: https://optimajet.com/
- Homepage: https://workflowengine.io/