Dynamic form builder

This is an dynamic form builder empowered FormWiz project.

How to use

* Install peer dependencies:

``bash
npm install --save react react-dom react-redux redux moment
`

* This package relies on redux-form so you need to install it (if you haven't):

`
npm install --save redux-form
`

* Install it:

`bash
npm install --save formwiz-publicweb-controls
`

* Load form options:

* Since the form builder relies on redux, you can only load its rendered form's options to state and then the form will load them automatically.
* First you need to register its store inredux's state tree:

`javascript
/**
* rootReducer.js
*/

import { formBuilder } from 'formwiz-publicweb-controls';
const rootReducer = combineReducers({
...
// Register formwiz-publicweb-controls's store
formBuilder
...
});
`

* Then dispatch formOptionsUpdate action from inside your action for loading form's options:

`javascript
/**
* actions.js
*/
import { formOptionsUpdate } from 'formwiz-publicweb-controls';
// Using redux-thunk (learn more at https://github.com/gaearon/redux-thunk)
export const loadFormOptions = (payload: {
uuid,
data,
currentSection
}) => {
return (
dispatch,
getState
) => {
const { uuid, data, currentSection } = payload;
fetch('http://www.my-api.com/my-form-options')
.then(
(formOptions) => {
// Set uuid back to new form options
formOptions.uuid = uuid; // optional
// Update form options
dispatch(formOptionsUpdate(uuid, formOptions));
}
)
};
};
`

* Load default form data:

`javascript
/**
* actions.js
*/
import { formOptionsUpdate, fillData } from 'formwiz-publicweb-controls';
// Using redux-thunk (learn more at https://github.com/gaearon/redux-thunk)
export const loadFormOptions = (payload: {
uuid,
data,
currentSection
}) => {
return (
dispatch,
getState
) => {
const { uuid, data, currentSection } = payload;
fetch('http://www.my-api.com/my-form-options')
.then(
(formOptions) => {
// Set uuid back to new form options
formOptions.uuid = uuid; // optional
// Assume you already have form data stored in reduxStore.formDataState
const {
formDataState,
currentSectionState
} = getState().application;

// Get current form data state
const formData = formDataState[formOptions.uuid];
if (formData) {
// fill data in current form
formOptions = fillData(
dispatch,
formOptions,
formData,
currentSection,
formMeta.isSubmitted
);
} else {
// Activate first section
formOptions.sections = formOptions.sections.map(
(section, index) => ({
...section,
isActive:
currentSection && currentSectionState
? currentSection.uuid === currentSectionState.uuid
: index === 0
})
);
}
// Update form options
dispatch(formOptionsUpdate(uuid, formOptions));
}
)
};
};
`

* Submit form data:

`javascript
/**
* actions.js
*/
import { formSubmit } from 'formwiz-publicweb-controls';
export const submit = ({ formUUID, formModel }) =>
formSubmit(
formUUID,
// onSubmitAction
// Call API to submit form model
() =>
fetch('http://www.my-api.com/my-form-data', {
method: 'POST', // or 'PUT'
body: JSON.stringify(formModel),
headers: new Headers({
'Content-Type': 'application/json'
})
})
// onStartAction?: Function
undefined,
// onErrorAction?: Function,
undefined,
// onSuccessAction?: Function,
undefined,
// onEndAction?: Function,
undefined,
// onCatchAction?: Function
);
`

* Import and then render it:

`javascript
/**
* MyFormComponent.js
*/
import React from 'react';
import { ReduxDynamicFormBuilder } from 'formwiz-publicweb-controls';

class MyFormComponent extends React.Component {
...
render() {
const DynamicFormBuilder = ReduxDynamicFormBuilder({
// Form's UUID
form: 'MyDynamicForm',
// Other redux-form configurations
...
});
return ();
}
}
`

* Advance configurations:

* Validation:

`javascript
/**
* MyFormComponent.js
*/
import React from 'react';
import { ReduxDynamicFormBuilder } from 'formwiz-publicweb-controls';

class MyFormComponent extends React.Component {
...
render() {
const DynamicFormBuilder = ReduxDynamicFormBuilder({
// Form's UUID
form: 'MyDynamicForm',
// Other redux-form configurations
...
});
return ( {
// Validating field's name
console.log(fieldName);
// Validation's errors
console.log(errors);
// Rendered form's ref object
console.log(form);
}}/>);
}
}
`

* Localization

* Date time:

* This package use moment as a date parser.
* You can change its locale via adding moment.locale(''); anywhere in your app, as long as it's executed before rendering the form.
* Best practice is to add it in app.js - where you bootstrapped your root React component.

`javascript
/**
* app.js
*/
import React from 'react';
import { render } from 'react-dom';
import moment from 'moment';
import 'moment/locale/hr';

moment.locale('en');
const App = props => (
...
);
...
render(
,
document.querySelector('#root')
);
`

* Other examples: COMING SOON.

* API docs:
* FormOptions interface.
* FormSection interface.
* FormField interface.
* Will be updated soon...

Contribution Guide

_Note: This package is currently receives contribution only from FormWiz team members. We're sorry about that._

* Clone FormWiz project repo.
* Run npm install and npm run bootstrap at repo's root folder. This will run lerna's bootstrap commands.
* Navigate to cloned-repo/src/FormWiz.DynamicFormBuilder in terminal.
* Run npm start. This will build formwiz-publicweb-controls package, copy it to packages which depends on it in this project and then watch for formwiz-publicweb-controls`'s changes.