form

i-Vresse workflow builder form React component

This package contains an enhanced version of the React JSON schema form component with Bootstrap 4 theme.

It adds the following:

• collapsible field
• table field
• bug fixes for checkbox widget and description field
• support for molecule formats (moleculefilepaths, chain, residue) in JSON schema
• index column for array types

See /docs/uiSchema.md how to configure the form.

Part of i-VRESSE/workflow-builder monorepo.

Install

npm install @i-vresse/wb-form

Usage

In a React application

import { useState } from "react";
import { Form } from "@i-vresse/wb-form";

// JSON schema draft-07
const schema = {
    type: "object",
    properties: {
        group1: {
            type: "object",
            properties: {
                prop1: {
                    type: "string",
                },
            },
        },
    },
};

const uiSchema = {
    group1: {
        "ui:field": "collapsible",
    },
};

export const Page = () => {
    const [formData, setFormData] = useState({});
    return (
        <div>
            <Form
                schema={schema}
                uiSchema={uiSchema}
                formData={formData}
                onSubmit={({ formData }) => setFormData(formData)}
            />
            <pre>{JSON.stringify(formData, undefined, 4)}</pre>
        </div>
    );
};

API documentation

API documentation of main branch is at https://i-vresse.github.io/workflow-builder/form/docs/.

The API documentation can be generated with

yarn apidocs

Will generate a docs/index.html.

The API docs exclude React components, the docs for the React components can be seen at https://i-vresse.github.io/workflow-builder/form/storybook-static/

Or generated locally with

yarn storybook

Which starts a storybook server on http://localhost:6007