@i-vresse/wb-form
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

i-Vresse workflow builder form React component

TS-Standard - Typescript Standard Style Guide npmjs.com

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

Readme

Keywords

Package Sidebar

Install

npm i @i-vresse/wb-form

Weekly Downloads

18

Version

2.0.0

License

Apache-2.0

Unpacked Size

28.7 kB

Total Files

5

Last publish

Collaborators

  • dmijatovic
  • sarahalidoost
  • rvhonorato
  • sverhoeven