@ibm-adw/skill-toolkit/node_modules/@adw/form-common/README.md

Developing your own skills with IBM Automation Digital Worker Skill Toolkit

# adw-form-common

[![Build Status](https://travis.ibm.com/dba/adw-form-common.svg?token=vvGdnqks1sx4d3PfQaYf&branch=master)](https://travis.ibm.com/dba/adw-form-common)

Form elements to be shared between skill-form and other usage of react-jsonschema-form

# Instructions

Install as a dependency using npm:
```
npm install --save @adw/form-common
```

# Using FormCommon

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { FormCommon } from '@adw/form-common';

// A JSON Schema
const schema = {
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name",
      "default": "Chuck"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    }
  }
};

// UI Schema for rjsf
const uiSchema = {};

// Initial form data
const formData =  {};

const formContext = {
    optionalLabel: 'optional',
    addItemLabel: 'Add item',
    moveItemUpLabel: 'move up',
    moveItemDownLabel: 'move down',
    removeItemLabel: 'remove item',
    messageObjectNoProp: 'no properties are provided',
    unsupportedFieldLabel: 'This field\'s schema is not supported.',
    // Function to get specific globalized message for a missing property schema
    getErrorTypeMessage: (type, message) => {
        return `${type} - ${message}`;
    }
};

// Function executed when clicking on Save button 
const onSubmit = () => {};

// Function executed when an input value changes 
const onChange = () => {};

// Function to translate error messages
const transformErrors = (errors) => { return errors; };

ReactDOM.render(
    <FormCommon
        schema={schema}
        uiSchema={uiSchema}
        formData={formData}
        onSubmit={onSubmit}
        onChange={onChange}
        liveValidate={true}
        showErrorList={false}
        formContext={formContext}
    />,
    document.getElementById('app')
);
```

# Testing

- Unit tests can be launched with:
```
npm test
```

- Storybook is available to have a preview of the component UI by manually changing the value of the properties with: 
 ```
npm run storybook
```