# Genesis Foundation Forms

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)

`foundation-forms` is a library for efficiently building complex forms at scale

### [API Docs](./docs/api/index.md)

## General usage

1. *Register components*

```ts
import { Form } from '@genesislcap/foundation-forms';
...
Form
...
```

2. *Add component to the template*
```html
<foundation-form resourceName="EVENT_TRADE_INSERT"></foundation-form>
```

This should generate working form based on the JSON schema for that endpoint. 
DevTools console will output autogenerated UI schema that you can use to configure the form

3. *Configure form using UI schema*
```ts
const sampleUISchema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/QUANTITY',
      label: 'Quantity',
    },
    {
      type: 'Control',
      scope: '#/properties/SIDE',
      label: 'Side',
    },
  ],
};

```
```html
<foundation-form resourceName="EVENT_TRADE_INSERT" :uischema=${() => sampleUISchema}></foundation-form>
```
       


## License

Note: this project provides front end dependencies and uses licensed components listed in the next section, thus licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.