doiforms/README.MD

A generalized tool for building formatted forms on multiple platforms

# Introduction
This is a javascript forms package for the DOI LE Portal.

The intention is that this package provides the high level logic for building your own forms.

To style the forms and provide extra bells and whistles implement a template form or use the existing [Bootstrap 3 Form Templates](https://www.npmjs.com/package/bootstrap3formtemplates). 

# Getting Started
1.	Installation process

    Install from npm using "npm i doiforms"

    to install the template form library run "npm i bootstrap3formtemplates"

2.	Software dependencies

This library is built with React 16.8.3.

3. Usage

Basic usage looks something like this:
```typescript
import { FormTemplate } from "bootstrap3formtemplates";
import {
  DOIFormComponent,
  EnumFieldType,
  IFieldState,
} from "doiforms";
import * as React from "react";

export default function MyForm(): JSX.Element{
    const field = {
      DisplayName: "Your Name",
      Id: "name",
      Name: "name",
      Order: 0,
      Required: true,
      Type: EnumFieldType.text };
    const submit = {
          DisplayName: "Submit",
          Id: "submitb",
          Name: "submitb",
          Order: 1,
          Required: true,
          Type: EnumFieldType.submit
        };
    return <DOIFormComponent        
        ErrorHandler={(ErrorMessage?: string, Stack?: string) => <h1>{ErrorMessage || "Error"}</h1><p>{Stack}</p>}
        Fields={[field,submit]}
        FormTemplate={FormTemplate}
        RedirectURL={"https://localhost"}
        SubmitAction={() => {
          return new Promise<void>(
            (resolve: () => void, reject: (reason: any) => void) => {
              resolve();
            });
        }} />;
}
```
Buttons may be added as input fields or added in the optional Header or Footer properties.

The FormTemplate property is a function implemented using the following signatures:
```typescript
interface IDOIFormAction {
    Action: EnumFormAction;
    Update?: IDOIFormState;
}
type FormActionFunc = (action: IDOIFormAction) => void;
interface ITemplateFormProps {
    Buttons: IButton[];
    ErrorHandler: ErrorHandlerFunc;
    FieldStates: IFieldState[];
    Footer?: JSX.Element;
    HandleSubmit: () => void;
    HandleReset: () => void;
    Header?: JSX.Element;
    IsError?: boolean;
    SendMessage: FormActionFunc;
    Styles: React.CSSProperties;
    SystemErrorMessage?: string;
}
type TemplateFormFunc = (props: ITemplateFormProps) => JSX.Element;
```
Template forms send messages to doiforms using the SendMessage property.
Messages include:
```typescript
enum EnumFormAction {
    NoOp = 0,
    Submit = 1,
    Reset = 2,
    Update = 3,
    HandleError = 4
}
```