@bigbinary/neeto-form-frontend 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +163 -0
  2. package/dist/index.js +52232 -0
  3. package/dist/index.js.map +1 -0
  4. package/dist/main.css +13240 -0
  5. package/package.json +124 -0
package/README.md ADDED
@@ -0,0 +1,163 @@
1
+ # @bigbinary/neeto-form-frontend
2
+
3
+ neetoFormEngine-frontend is the library that manages forms across neeto
4
+ products.
5
+
6
+ ## Installation
7
+
8
+ ```zsh
9
+ yarn add @bigbinary/neeto-form-frontend
10
+ ```
11
+
12
+ **neetoFormEngine-frontend** has a few peer dependencies that are required for
13
+ the proper functioning of the package. Install all the peer dependencies using
14
+ the below command:
15
+
16
+ ```zsh
17
+ yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9
18
+ ```
19
+
20
+ Import stylesheet from the following location:
21
+
22
+ ```scss
23
+ @import "@bigbinary/neeto-form-frontend/dist/main.css";
24
+ ```
25
+
26
+ Add `NeetoFormProvider` to the root of your application:
27
+
28
+ ```jsx
29
+ import React from "react";
30
+
31
+ import { NeetoFormProvider } from "@bigbinary/neeto-form-frontend";
32
+
33
+ const App = () => {
34
+ return (
35
+ <>
36
+ <NeetoFormProvider>{/* Other children */}</NeetoFormProvider>
37
+ </>
38
+ );
39
+ };
40
+ ```
41
+
42
+ ## Components
43
+
44
+ `BuildForm` component is used to render a form builder.
45
+
46
+ ```js
47
+ import { BuildForm } from "@bigbinary/neeto-form-frontend";
48
+ ```
49
+
50
+ | prop | type | description |
51
+ | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
52
+ | `isEmbedded` | `boolean` | To apply styles for embedding |
53
+ | `id` | `string` | Form id |
54
+ | `onUpdate` | `function` | Callback for form update |
55
+ | `buildRequestArgs` | `object` | Arguments for build request |
56
+ | `showAddQuestionDivider` | `boolean` | To show add question divider |
57
+ | `nonRemovableFields` | `string[]` | Field kinds that cant be deleted from a form. Accepts array of kinds: `name`, `email`, `phone`, `rating`, `checkbox`, `dropdown` |
58
+ | `submitButtonProps` | `object` | Props for submit button |
59
+ | `cancelButtonProps` | `object` | Props for cancel button |
60
+ | `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` |
61
+
62
+ `ExternalForm` component is used to render a form.
63
+
64
+ ```js
65
+ import { ExternalForm } from "@bigbinary/neeto-form-frontend";
66
+ ```
67
+
68
+ | prop | type | description |
69
+ | --------------------- | ----------------- | ---------------------------------------------------------------------- |
70
+ | `formId` | `string` | Form id |
71
+ | `customSubmitHandler` | `function` | Custom submit handler to be called instead of internal submit handlers |
72
+ | `onBeforeSubmit` | `function` | Callback for before form submit |
73
+ | `onCreateSuccess` | `function` | Callback for form creation success |
74
+ | `showTitle` | `boolean` | To show form title |
75
+ | `submitRequestArgs` | `object` | Arguments for form submit request payload |
76
+ | `footer` | `React.Component` | To render a Footer Component |
77
+ | `submitButtonProps` | `object` | Props for submit button |
78
+ | `cancelButtonProps` | `object` | Props for cancel button |
79
+ | `resetButtonProps` | `object` | Props for reset button |
80
+ | `showPrefixIcons` | `boolean` | To show prefix icons in input fields |
81
+ | `displayThankYou` | `boolean` | To show thank you message after form submit |
82
+ | `className` | `string` | To apply custom class to the form wrapper |
83
+ | `submissionId` | `string` | To set submission id for updating the form |
84
+ | `preview` | `boolean` | To show form in preview mode |
85
+ | `preserveValues` | `boolean` | To preserve form values in localStorage |
86
+ | `formTitle` | `string` | To set form title |
87
+ | `titleProps` | `object` | To set props for form title |
88
+ | `clearValuesOnSubmit` | `boolean` | To clear local storage values on submit |
89
+ | `clearValuesOnReset` | `boolean` | To clear local storage values on reset |
90
+ | `formDomProps` | `object` | To set props for form element |
91
+
92
+ `Submission` component is used to render a form result.
93
+
94
+ ```js
95
+ import { Submission } from "@bigbinary/neeto-form-frontend";
96
+ ```
97
+
98
+ | prop | type | description |
99
+ | -------------------- | -------- | --------------------------------------- |
100
+ | `formId` | `string` | Form id |
101
+ | `submissionId` | `string` | Submission id |
102
+ | `className` | `string` | To apply custom class component wrapper |
103
+ | `questionLabelProps` | `object` | To override props for question label |
104
+ | `answerProps` | `object` | To override props for answer text |
105
+
106
+ ## Hooks
107
+
108
+ `useBuildFormState` hook is used to get the form state.
109
+
110
+ ```js
111
+ import {
112
+ useBuildFormState,
113
+ BuildForm,
114
+ } from "@bigbinary/neeto-form-frontend";
115
+
116
+ const FormBuilder = () => {
117
+ const {
118
+ values,
119
+ dirty,
120
+ isSubmitting,
121
+ isValid,
122
+ submitForm,
123
+ resetForm,
124
+ errors,
125
+ } = useBuildFormState();
126
+
127
+ return <BuildForm />;
128
+ };
129
+ ```
130
+
131
+ `useFormSubmission` hook is used to fetch the form submission data.
132
+
133
+ ```js
134
+ import { useFormSubmission } from "@bigbinary/neeto-form-frontend";
135
+
136
+ const Component = () => {
137
+ const { submission, isLoading } = useFormSubmission({
138
+ formId: "form-id",
139
+ submissionId: "submission-id",
140
+ });
141
+
142
+ return <></>;
143
+ };
144
+ ```
145
+
146
+ ## Development
147
+
148
+ Install all the dependencies by executing the following command
149
+
150
+ ```zsh
151
+ yarn install
152
+ ```
153
+
154
+ ## Building
155
+
156
+ The neetoFormEngine-frontend package gets auto-published to npm for every new
157
+ merge to the main branch. You can checkout the `publish` workflow in git actions
158
+ to get a live update.
159
+
160
+ ## Used in
161
+
162
+ - [neetoCal](https://github.com/bigbinary/neeto-cal-web)
163
+ - [neetoCRM](https://github.com/bigbinary/neeto-crm-web)