# React Form Builder

Package to create form using JSON schema

## Installation

Install react form builder

```
npm i --save stark-form-builder-next
```

## Dependencies

Install dependent libraries

- bootstratp
- react-bootstrap
- react-select
- react-datepicker
- simple-react-validator
- react-stepper-horizontal

```
npm i --save bootstrap react-bootstrap react-select react-datepicker simple-react-validator react-stepper-horizontal
```

## Usage

Import this in your screen/component.

Import following css in Entry file of React/Next App or include in global.css file.
```
import 'stark-form-builder-next/dist/style.css';
```

```
import StarkFormBuilder from "stark-form-builder-next";
import FormSchema from './formschema.json';
```

Example : 

```
import { Card } from "react-bootstrap";
import StarkFormBuilder from "stark-form-builder-next";
import FormSchema from "../FormSchema.json";
import {useState } from "react";


export default function CreatForm() {
  const [defaultValues, updateDefaultValues] = useState({});
  const [options, updateOptions] = useState({});
  const [currentUser, updateCurrentUser] = useState(0);

  return (
    <>
      <Card>
        <Card.Header>Create form example</Card.Header>
        <Card.Body>
           <StarkFormBuilder
            containerClass=''
            formHeaderClass=''
            formHeading="Registration"
            formSections={FormSchema}
            onFormSubmit={(formValues) => { console.log(formValues); }}
            options={options}
            callbacks={{}}
            defaultFormValues={defaultValues}
            currentUser={currentUser}
            submitBtnText="Submit"
            showDraftBtn
            draftBtnText="Save as draft"
            onFormDraft={(formValues) => { console.log(formValues); }}
            showResetBtn
            resetBtnText="Clear"
            btnContainerClass=""
            onFormReset={() => { console.log('form reset callback); }}
             // isStepForm
            stepFormProps={{
              steps: {
                userinfo: {
                  label: 'first'
                },
                userdetails: {
                  label: 'second'
                }
              },
              containerClass: 'stark-stepper-container',
              nextBtnText: '',
              prevBtnText: ''
            }}
            addMoreRemoveCallback={() => { console.log('Add more field removed callback'); }}
            addMoreAddCallback={() => { console.log('Add more field add callback'); }}
        />
        </Card.Body>
      </Card>
    </>
  );
}

```

### Configurable props

- containerClass - Class for form container
- formHeaderClass - Class for form heading
- formHeading - Heading for form
- formSections - JSON form schema for form
- onFormSubmit - Callback for form submission, gives all form filled values
- options - Pass options dynamically to Select box and Checkboxes

  ```
  options: {{
      subjects: [{value: 'maths', label: 'Maths'}, {value: 'chem', label: 'Chemistry'}],
  }}
  ```

  NOTE: Key must be same as input value, then only it'll patch the values

- callbacks - On change callbacks for input type select change
  ```
  callbacks: {{
      callback1: (value) => { console.log(value); }
  }}
  ```
- defaultFormValues - This will be used to set default values to form.
  ```
  defaultFormValues: {{
      name: 'Sample Name',
      email: 'sample@example.com'
  }}
  ```
  NOTE: Key must be same as input value, then only it'll patch values
- currentUser - Current users role id, it'll be used to restrict users to fill particular fields.
- submitBtnText - To change submit button text
- showResetBtn - Boolean value to show form reset button
- resetBtnText - To change reset button text
- btnContainerClass - Submit and reset buttons container class to add custom styling
- onFormReset - Callback on reset form
- isStepForm - To load it as step form
- stepFormProps - Configurations props for step form

  - containerClass - Container class for steps
  - nextBtnText - Next button text
  - prevBtnText - Previous button text
  - steps - Configuration for steps label and image
    - label - Label for step
    - image - Image url for step image

  ```
    stepFormProps={{
      steps: {
        userinfo: {
          label: 'first',
          image: 'https://via.placeholder.com/20',
        },
        userdetails: {
          label: 'sectond',
          image: 'https://via.placeholder.com/30',
        }
      },
      containerClass: 'stark-stepper-container',
      nextBtnText: '',
      prevBtnText: ''
    }}
  ```

  NOTE : steps object keys should match **sectionName** key from formschema

### JSON Schema

```
[
    {
        "sectionTitle": "User info",
        "containerClass": "user-section",
        "displaySection": true,
        "displaySectionTitle": true,
        "fields": [
            {
                "name": "name",
                "type": "text",
                "label": "Name",
                "id": "",
                "placeholder": "",
                "inputClass": "",
                "containerClass": "",
                "tooltip":""
                "validations": [
                    {
                        "type": "required",
                        "applyWhen": [],
                        "applyWhenRelation": "OR"
                    }
                ],
                "errorMessage": { //To override error msg of require or whatever your pattern
                  "messages": {
                    "default": "First name and last name must be required."
                  }
                },
                "displayWhen": {
                    "conditions": [
                        {
                            "name": "gender",
                            "value": "female",
                            "condition": "=="
                        }
                    ],
                    "displayWhenRelation": "AND"
                },
                "disabled": false,
                "allowedUsers": []
            }
        ]
    }
]
```

You can have multiple sections in schema.

### Configurable JSON schema

- sectionTitle - Title of section
- containerClass - Class for section container
- displaySection - (Boolean value) whether to display section or not
- displaySectionTitle - (Boolean value) whether to display section title or not
- sectionLayout - Layout of sections. Allowed types '1column', '2column', '3column', '4column'.
- fields - Array of objects
  - id - Field identifier
  - name - Input name
  - type - Input type. Available type text, email, number, select, date, textarea, radio, checkbox, addmore
  - label - Label for input field
  - containerClass - Class for input container
  - placeholder - Placeholder for input type
  - inputClass - Input element class
  - validations - Validations for input element. Its array of objects
    - type - Type from react-simple-validator npm
    - applyWhen - Array of objects, conditions to apply validations
      - name - Input name
      - value - That input value
      - condition - Condition for name and value. Supported conditions are '==', '!=', '<=', '>=', '<', '>', 'empty', '!empty'
    - applyWhenRelation - 'AND'|'OR'. Relation for applyWhen conditions.
  - options - Array of objects. Options for 'radio','select','checkbox'.
    ```
    [{label: 'Option 1', value: 'option1'}, {label: 'Option 2', value: 'option2'}]
    ```
  - displayWhen - Object. This will be used for hide/show form element for particular conditions
    - conditions - Array of objects, conditions to apply validations
      - name - Input name
      - value - That input value
      - condition - Condition for name and value. Supported conditions are '==', '!=', '<=', '>=', '<', '>', 'empty', '!empty'
    - displayWhenRelation - 'AND'|'OR'. Relation for conditions.
  - disabled - To disable input field.
  - maxDateSelector - Form element name. If current type is date and to set maximum date this will be used
  - minDateSelector - Form element name. If current type is date and to set minimum date this will be used
  - callback - callback key. This will be called onchange of element
  - fields - If type is selected as "addmore" then to add fields under that input this options will be used.
  - fieldLayout - If type is selected as "addmore" then to set layout of add more section. Allowed types '1column', '2column', '3column', '4column'.
  - sectionClass - If type is selected as "addmore" then to add class for that section