@bigbinary/neeto-form-engine-frontend

neetoFormEngine-frontend is the library that manages forms across neeto
products.

Installation

``zsh
yarn add @bigbinary/neeto-form-engine-frontend
`

neetoFormEngine-frontend has a few peer dependencies that are required for
the proper functioning of the package. Install all the peer dependencies using
the below command:

`zsh
yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9
`

Import stylesheet from the following location:

`scss
@import "@bigbinary/neeto-form-engine-frontend/dist/main.css";
`

Add NeetoFormProvider to the root of your application:

`jsx
import React from "react";

import { NeetoFormProvider } from "@bigbinary/neeto-form-engine-frontend";

const App = () => {
return (
<>
{/ Other children /}

);
};
`

Components

BuildForm component is used to render a form builder.

`js
import { BuildForm } from "@bigbinary/neeto-form-engine-frontend";
`

| prop | type | description |
| ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isEmbedded | boolean | To apply styles for embedding |
| id | string | Form id |
| onUpdate | function | Callback for form update |
| buildRequestArgs | object | Arguments for build request |
| showAddQuestionDivider | boolean | To show add question divider |
| nonRemovableFields | string[] | Field kinds that cant be deleted from a form. Accepts array of kinds: name, email, phone, rating, checkbox, dropdown |
| submitButtonProps | object | Props for submit button |
| cancelButtonProps | object | Props for cancel button |
| requiredFields | string[] | Fields that are required. Provided fields will be treated as required by default in the External form, the checkbox for toggling required will be hidden for the fields. Accepts array of kinds: name, email, phone, rating, checkbox, dropdown |

ExternalForm component is used to render a form.

`js
import { ExternalForm } from "@bigbinary/neeto-form-engine-frontend";
`

| prop | type | description |
| --------------------- | ----------------- | ---------------------------------------------------------------------- |
| formId | string | Form id |
| customSubmitHandler | function | Custom submit handler to be called instead of internal submit handlers |
| onBeforeSubmit | function | Callback for before form submit |
| onCreateSuccess | function | Callback for form creation success |
| showTitle | boolean | To show form title |
| submitRequestArgs | object | Arguments for form submit request payload |
| footer | React.Component | To render a Footer Component |
| submitButtonProps | object | Props for submit button |
| cancelButtonProps | object | Props for cancel button |
| resetButtonProps | object | Props for reset button |
| showPrefixIcons | boolean | To show prefix icons in input fields |
| displayThankYou | boolean | To show thank you message after form submit |
| className | string | To apply custom class to the form wrapper |
| submissionId | string | To set submission id for updating the form |
| preview | boolean | To show form in preview mode |
| preserveValues | boolean | To preserve form values in localStorage |
| formTitle | string | To set form title |
| titleProps | object | To set props for form title |
| clearValuesOnSubmit | boolean | To clear local storage values on submit |
| clearValuesOnReset | boolean | To clear local storage values on reset |
| formDomProps | object | To set props for form element |

Submission component is used to render a form result.

`js
import { Submission } from "@bigbinary/neeto-form-engine-frontend";
`

| prop | type | description |
| -------------------- | -------- | --------------------------------------- |
| formId | string | Form id |
| submissionId | string | Submission id |
| className | string | To apply custom class component wrapper |
| questionLabelProps | object | To override props for question label |
| answerProps | object | To override props for answer text |

Hooks

useBuildFormState hook is used to get the form state.

`js
import {
useBuildFormState,
BuildForm,
} from "@bigbinary/neeto-form-engine-frontend";

const FormBuilder = () => {
const {
values,
dirty,
isSubmitting,
isValid,
submitForm,
resetForm,
errors,
} = useBuildFormState();

return ;
};
`

useFormSubmission hook is used to fetch the form submission data.

`js
import { useFormSubmission } from "@bigbinary/neeto-form-engine-frontend";

const Component = () => {
const { submission, isLoading } = useFormSubmission({
formId: "form-id",
submissionId: "submission-id",
});

return <>;
};
`

Development

Install all the dependencies by executing the following command

`zsh
yarn install
`

Building

The neetoFormEngine-frontend package gets auto-published to npm for every new
merge to the main branch. You can checkout the publish` workflow in git actions
to get a live update.

Used in

- neetoCal
- neetoCRM